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

【问题标题】：Using jQuery to append a div to a dynamically created div after AJAX success在 AJAX 成功后使用 jQuery 将 div 附加到动态创建的 div
【发布时间】：2014-09-09 23:48:45
【问题描述】：

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

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

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

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

这就是我希望它在用户投票后的样子：

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

如果有人能给我指路，我将不胜感激。我已经为此绞尽脑汁好几个小时了。

编辑：我没有跟上 AJAX 的速度，所以我无法准确提供所需的代码，但这里是插件的文件列表：https://github.com/lesterchan/wp-polls

【问题讨论】：

如果您想要更“精确引导”（即根据您的情况量身定制）的响应，您将不得不显示 ajax 代码。可能你已经很好地掌握了 AJAX，但是如果复习会有所帮助here are a few examples
@gibberish 你知道，我认为包含它是个好主意，但我不确定要显示哪个文件。我实际上并没有很好地掌握 AJAX。不过，如果您想看一下，这里是文件列表。我相信wp-polls.php 是您要求的：github.com/lesterchan/wp-polls

标签： javascript jquery ajax wordpress dom

【解决方案1】：

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

如果需要，您还可以更改 '.show()' 以实际将样式设置为 display:block。

【讨论】：

你能解释一下这一行的目的吗：$('#poll').empty().append('<div class="voted"></div>'); 一旦用户投票，插件就已经动态插入了.voted div。我只是想了解那条线的用途。
@J82 .empty() 删除 #poll div 中的所有内容。 .append() 然后将.voted DIV 添加到末尾（即作为最后一个内容）新清空的#poll div。由于 div 为空，您可以使用 append() 或 prepend() 或 .html()

【解决方案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' 元素的克隆，以便您可以 .remove() 原始 '.comment-block' 和 .append() 或 .prepend() 克隆元素到 '#poll' 元素。最后，使用<div class="voted"> .wrap() 克隆并调用 .show() 以显示克隆。

【讨论】：

我可以看到这背后的逻辑，但由于某种原因，当我单击 .Buttons 时，.comment-block div 就消失了。我查看了 DOM 以查看它是否已包装并附加到 #poll，但找不到它。另外，.voted div 已经被插件动态插入，所以需要包装它吗？或者我想我可以将那个 div 从仪表板中的投票模板中取出。
看起来当.Buttons 被点击时，.comment-block 短暂出现，然后随着投票表格的其余部分消失。所以我假设.comment-block div 在 AJAX 操作之前被附加得太早，而应该在用户投票后附加。只是让您知道，以防万一新信息有任何帮助。
@J82 听起来插件正在操作您尝试引用的 DOM 元素（#poll、.voted 等）。您可以选择几个选项：如果插件有文档，请检查是否定义了回调；或者您可能需要找到一种方法来操作静态 DOM 元素...
我查看了文档，但似乎没有任何回调。有什么办法可以稍微延迟这段代码，直到 AJAX 成功完成？看起来可以这样做，因为现在我可以看到评论表单被 .voted 包裹起来，但它立即消失了。
查看更新的代码：通常不建议这样做，因为使用设定的时间来延迟回调是非常随意的。太多的变量决定了在回调可以运行之前执行函数需要多长时间。所以你真的不能把它归结为一个时间。但是， setTimeout() 会将函数的执行延迟指定的时间（以毫秒为单位）（在靠近底部的代码中，1000 = 1 秒）。因此，更新的代码将在单击 .Buttons 后运行 1 秒。不确定这是否可行。如有必要，您也可以尝试增加时间。

【解决方案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);
  }
});

【讨论】：