在AJAX成功之后，使用jQuery将div附加到动态创建的div

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.

我正在使用WordPress的WP-Polls插件,这是一个AJAX轮询系统,我试图将一个最初隐藏的div(.comment-block)附加到一个新的div(.voted),它将被动态插入到DOM中AJAX成功后的WP-Polls插件。一旦用户投票并点击了投票按钮(.Buttons),DOM就会更新,以反映添加了一个.voted类的新(空)div。我之前提出了类似的问题,但我想我会打开一个新的更相关的主题。

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.

注意:.voted div是通过WP-Polls在仪表板中提供的模板创建的。该插件提供“在用户投票之前”和“在用户投票之后”的模板,我所做的是在后者中插入一个div:

。我不能直接在div中添加内容的原因是因为要附加的div中的内容(.comment-block)是由插件Contact Form 7创建的联系表单,它需要PHP语句。模板中只允许使用HTML。

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.

在其他各种失败的尝试中,我尝试使用.on以便单击.Buttons将激活该功能。但是,DOM中没有任何改变。

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

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

下面是HTML。这是在用户投票之前:

<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

编辑:我不能快速使用AJAX,所以我无法提供所需的代码,但这里有一个插件文件列表:https://github.com/lesterchan/wp-polls

3 个解决方案

#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.

你也可以改变'.show()'来实际设置样式专门显示:block如果你需要。

#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.

首先,将“click”绑定到“.Buttons”元素。然后,创建'.comment-block'元素的克隆,这样你就可以将原来的'.comment-block'和.append()或.prepend()克隆元素移到'#poll'元素中。最后,.wrap()带有

的克隆并调用.show()来显示克隆。

#3

You need to trigger an event from the ajax call:

您需要从ajax调用触发事件:

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.

按钮onclick函数触发ajax调用。 ajax成功触发要更改的目标元素上的事件,并将其响应作为参数传递。

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);
  }
});

#1

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