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

admin

Administrator
Staff member
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
) to a new div (
Code:
.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 (
Code:
.Buttons
), the DOM updates to reflect the addition of the new (empty) div with a class of
Code:
.voted
. I put up a similar question earlier but thought I'd open a new more relevant thread.

<blockquote>
Note: The
Code:
.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:
Code:
&lt;div class="voted"&gt;&lt;/div&gt;
. 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
) is a contact form created by the plugin Contact Form 7 and it requires a PHP statement. Only HTML is allowed in the templates.
</blockquote>

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

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

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

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;

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

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;

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: <a href="https://github.com/lesterchan/wp-polls" rel="nofollow">https://github.com/lesterchan/wp-polls</a>