Question

我正在使用WordPress的WP-Polls插件，这是一个AJAX投票系统，我试图将最初隐藏的div（.comment-block）追加到新的div（{{1}在AJAX成功时，WP-Polls插件将动态插入DOM。一旦用户投票并点击了投票按钮（.voted），DOM就会更新以反映添加了一个.Buttons类的新（空）div。我之前提出了类似的问题，但我认为我打开了一个新的更相关的问题。

注意：.voted div是通过WP-Polls模板创建的仪表板中提供。该插件提供之前的模板用户已投票＆＃34;和＃34;用户投票后＃34;而我所做的是像这样在后者中插入一个div：.voted。我不能直接在div中添加内容的原因是因为要附加的div中的内容（<div class="voted"></div>）是由插件Contact Form 7创建的联系表单，它需要一个PHP语句。模板中只允许使用HTML。

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

.Buttons

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

$(document).on('click', '.Buttons', function() {
    $('.comment-block').appendTo('.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>

如果有人能指引我，我会很感激。我已经用这个来锻炼我的大脑几个小时了。

编辑：我无法快速使用AJAX，因此我无法准确提供所需的代码，但这里有一个插件文件列表：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');
});

您还可以更改＆＃39; .show（）＆＃39;实际上将样式专门设置为display：block，如果需要。

Answer 2

如果我理解你的问题，这应该有效：

$('.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);
});

首先，将'click'绑定到'.Buttons'元素。然后，创建'.comment-block'元素的克隆，这样你就可以将原始的'.comment-block'和.append（）或.prepend（）克隆元素删除到'#poll'元素。最后，.wrap（）带有<div class="voted">的克隆并调用.show（）来显示克隆。

Answer 3

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

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

例如： 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);
  }
});

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

3 个答案: