AJAX成功后，使用jQuery將div附加到動態創建的div

Question

我正在使用WordPress的WP-Polls插件，這是一個AJAX輪詢系統，並且我試圖將最初隱藏的div（ .comment-block ）附加到新的div（ .voted ）上，該div將通過以下方式動態插入DOM在AJAX成功后即可使用WP-Polls插件。 一旦用戶投票並單擊了投票按鈕（ .Buttons ），DOM就會更新以反映新添加的類為.voted （空）div。 我之前提了一個類似的問題，但是以為我會打開一個新的更相關的主題。

注意： .voted div是通過WP-Polls在儀表板中提供的模板創建的。 該插件提供了“在用戶投票之前”和“在用戶投票之后”的模板，而我所做的就是像下面這樣在div中插入一個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

Answer 1

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

如果需要，您也可以更改“ .show（）”以將樣式實際設置為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);
});

首先，將“單擊”綁定到“ .Buttons”元素。 然后，創建'.comment-block'元素的副本，以便可以將原始的'.comment-block'.remove（）和.append（）或.prepend（）復制到'#poll'元素。 最后，使用<div class="voted">使用.wrap（）復制該克隆，然后調用.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);
  }
});