Using jQuery to append a div to a dynamically created div after AJAX success

Question

I am using the WP-Polls plugin for WordPress which is an AJAX polling system and I'm trying to append an initially hidden div (.comment-block) to a new div (.voted) 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 (.Buttons), the DOM updates to reflect the addition of the new (empty) div with a class of .voted. I put up a similar question earlier but thought I'd open a new more relevant thread.

Note: The .voted 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: <div class="voted"></div>. The reason why I can't just add content inside that div directly is because the content in the div to be appended (.comment-block) is a contact form created by the plugin Contact Form 7 and it requires a PHP statement. Only HTML is allowed in the templates.

Among other various failed attempts, I have tried to use .on so that clicking on .Buttons would activate the function. However, nothing was changed in the DOM.

$(document).on('click', '.Buttons', function() {
    $('.comment-block').appendTo('.voted');
});

Below is the HTML. This is before the user has voted:

<div id="poll">
    (poll here) + .Buttons vote button                  <-- in here----------| 
</div>                                                                       |
<div class="comment-block" style="display:none">        <-- I want this div  |
    <?php echo do_shortcode('[contact-form-7]'); ?>
</div>  

And this is how I want it to look after the user has voted:

<div id="poll">
    <div class="voted">                                 <-- dynamically created div
        <div class="comment-block" style="display:block">
            <?php echo do_shortcode('[contact-form-7]'); ?>
        </div> 
    </div>
</div>                                              

If anyone can show me the way, I'd appreciate it. I've been racking my brain with this one for hours.

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: https://github.com/lesterchan/wp-polls

Answer 1

$('button.Buttons').click(function ()
{
    $('#poll').empty().append('<div class="voted"></div>');
    $('.comment-block').show().appendTo('.voted');
    $(this).unbind('click');
});

You can also change the '.show()' to actually set the style specifically to display:block if you need to.

Answer 2

If I understand your question correctly, this should work:

$('.Buttons').on('click', function () {
  setTimeout(function () {
    var commentBlock = $('.comment-block'),
      cloneComment = commentBlock.clone();
      commentBlock.remove();
    $('#poll').append(cloneComment);
    cloneComment.wrap('<div class="voted">').show();
  }, 1000);
});

First, bind the 'click' to the '.Buttons' element. Then, create a clone of the '.comment-block' element so you can .remove() the original '.comment-block' and .append() or .prepend() the cloned element to the '#poll' element. Lastly, .wrap() the clone with a <div class="voted"> and call .show() to display the clone.

Answer 3

You need to trigger an event from the ajax call:

The button onclick function fires the ajax call. The ajax success fires event(s) on the targeted elements to be changed and passes it's response as a parameter.

example: html

<div id="foo">bar</div>
<button onclick="ajaxCall();" />

javascript

var ajaxCall = function() {
  $.ajax({
    success: function(response) {
      $("#foo").trigger("ajsuccess", response);
    }
  });
};
$("#foo").on({
  "ajsuccess" : function(e, response) {
    $(this).append(response);
  }
});