动态添加的元素无法动态添加回父 div答案

【问题标题】：Dynamically added elements are unable to dynamically added back to parent div动态添加的元素无法动态添加回父 div
【发布时间】：2015-12-19 19:24:50
【问题描述】：

我很难理解为什么从我的“成分”div 中动态（单击）添加到“购买列表”div 的元素在单击“购买”div 时的反应方式不同，返回到'成分' div 并重新填充它。

所用 HTML 的 sn-p：

<div id="inner_bought_list"><br><br>
        <p>testing</p>
        <p>1 2 3</p>
</div> 

<div class= "content" id="ingred_checklist">
        <p>200g thin dried rice-stick noodles</p>
        <p>185g Ayam Malaysian laksa paste </p>
        <p>1/2 small red onion, quartered, thinly sliced</p>

这里的代码成功地将 p-tag 元素的文本从我的“Ingredients”div 动态添加到我的“Bought”div，同时也将它们从“Ingredients”div 中删除（控制台反映了这一点）：

$('#ingred_checklist p').click(function() {
        var toAdd = $(this).text();
        console.log(toAdd);

        var string = '<p>' + '•' + toAdd + '</p>';
        console.log(string);

        var tAS = $('#inner_bought_list').append(string);
        console.log(tAS);

    });

    $(document).on('click', '#ingred_checklist p', function() {
        $(this).remove();

    });

但是，当我尝试单击“已购买”div 中通过“成分”中的 .on('click') 动态添加的项目时，它们已成功从“已购买”div 中删除，但未添加（返回）到“成分”div。控制台也没有显示当单击动态添加的 p-tag 时，将 .text() 存储到 'var toAddRet' 中。

$('#inner_bought_list p').click(function() {
    var toAddRet = $(this).text();
    console.log(toAddRet);

    var stringRet = '<p>' + toAddRet + '</p>';
    console.log(stringRet);

    var tASRet= $('#ingred_checklist').append(stringRet);
    console.log(tASRet);

});

    $(document).on('click', '#inner_bought_list p', function() {
    $(this).remove();

});

本质上，最初出现在 html 中的 p-tags 可以添加到其他 div 中，但不能添加到动态添加的 div 中。为什么？

【问题讨论】：

标签： jquery dynamic click

【解决方案1】：

您必须委托您的活动：

$('body')on('click', '#ingred_checklist p', function() {

   var toAdd = $(this).text();
    console.log(toAdd);

    var string = '<p>' + '•' + toAdd + '</p>';
    console.log(string);

    var tAS = $('#inner_bought_list').append(string);
    console.log(tAS);

});


$('body')on('click', '#inner_bought_list p', function() {
    var toAddRet = $(this).text();
    console.log(toAddRet);

    var stringRet = '<p>' + toAddRet + '</p>';
    console.log(stringRet);

    var tASRet= $('#ingred_checklist').append(stringRet);
    console.log(tASRet);

});

否则，新添加的元素不会绑定事件。通过委托，事件被绑定到一个父容器，该容器将把事件传播给给定的子容器。为了性能，您应该从最近的静态父级委托事件（为了示例，我使用了主体）。

【讨论】：