title: Using jQuery to append a div to a dynamically created div after AJAX success
body: <p>I am using the <a href="https://wordpress.org/plugins/wp-polls/" rel="nofollow">WP-Polls</a> plugin for WordPress which is an AJAX polling system and I'm trying to append an initially hidden div (<code>.comment-block</code>) to a new div (<code>.voted</code>) which will be dynamically inserted into the DOM by the WP-Polls plugin upon AJAX success. Once the user has voted and clicked on the vote button (<code>.Buttons</code>), the DOM updates to reflect the addition of the new (empty) div with a class of <code>.voted</code>. I put up a similar question earlier but thought I'd open a new more relevant thread.</p>
  
  <blockquote>
    <p>Note: The <code>.voted</code> div was created through the templates that WP-Polls
    offers in the dashboard. The plugin offers templates for "before
    the user has voted" and "after the user has voted" and what I did was
    insert a div into the latter like this: <code>&lt;div class="voted"&gt;&lt;/div&gt;</code>. The reason why I can't just add content inside that div directly is because the content in the div to be appended (<code>.comment-block</code>) is a contact form created by the plugin Contact Form 7 and it requires a PHP statement. Only HTML is allowed in the templates.</p>
  </blockquote>
  
  <p>Among other various failed attempts, I have tried to use <code>.on</code> so that clicking on <code>.Buttons</code> would activate the function. However, nothing was changed in the DOM.</p>
  
  <pre><code>$(document).on('click', '.Buttons', function() {
      $('.comment-block').appendTo('.voted');
  });
  </code></pre>
  
  <p>Below is the HTML. This is before the user has voted:</p>
  
  <pre><code>&lt;div id="poll"&gt;
      (poll here) + .Buttons vote button                  &lt;-- in here----------| 
  &lt;/div&gt;                                                                       |
  &lt;div class="comment-block" style="display:none"&gt;        &lt;-- I want this div  |
      &lt;?php echo do_shortcode('[contact-form-7]'); ?&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>And this is how I want it to look after the user has voted:</p>
  
  <pre><code>&lt;div id="poll"&gt;
      &lt;div class="voted"&gt;                                 &lt;-- dynamically created div
          &lt;div class="comment-block" style="display:block"&gt;
              &lt;?php echo do_shortcode('[contact-form-7]'); ?&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;                                              
  </code></pre>
  
  <p>If anyone can show me the way, I'd appreciate it. I've been racking my brain with this one for hours.</p>
  
  <p>Edit: I am not up to speed with AJAX so I'm unable to provide exactly the code that is needed, but here is a list of the files for the plugin: <a href="https://github.com/lesterchan/wp-polls" rel="nofollow">https://github.com/lesterchan/wp-polls</a></p>