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

Question

我很难理解为什么从我的 'Ingredients' div 动态（点击）添加的元素到我的 'Bought List' div 的反应不一样当单击 'Bought' div 时，返回到 'Ingredients' div 并重新填充它。

使用的 HTML 片段：

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

这里的代码成功地动态地将我的 'Ingredients' div 中的 p-tag 元素的文本添加到我的 '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();

    });

但是，当我尝试单击 'Bought' div 中的项目时，这些项目是通过 'Ingredients' 中的 .on('click') 动态添加的，它们是已成功从 'Bought' div 中删除，但未添加（返回）到 'Ingredients' div。控制台也没有显示当单击动态添加的 p 标签时，将 .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，但不能添加到动态添加的 p-tags。为什么？

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

});

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

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

Dynamically added elements are unable to dynamically added back to parent div

jquery

dynamic

click