Question

我很难理解为什么动态（点击）添加来自我的＆＃39;成分＆＃39; div，到我的'Bought List＆＃39;当点击“买入”时，div不会以同样的方式作出反应。 div，回到＆＃39; Ingredients＆＃39; 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>

此代码成功地动态添加了我的＆＃39; Ingredients＆＃39;中的p-tag元素的文本。 div to my＆＃39; Bought＆＃39; div，同时也将它们从＆＃39; Ingredients＆＃39; 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（＆＃39;点击＆＃39;）动态添加来自＆＃39; Ingredients＆＃39;，它们已成功从“买入”中删除。 div，但没有添加（返回）成分＆＃39; DIV。控制台也没有显示，当点击动态添加的p标签时，将.text（）存储到＆to; var toAddRet＆＃39;。

$('#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-tag可以添加到另一个div中，但不能添加到动态添加的div中。为什么呢？

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

1 个答案: