動態添加的元素無法動態添加回父div

Question

我很難理解爲什麼動態（點擊）添加元素從我的'成分'div，我的'買單'div，不反應相同的方式當點擊'買'div，回到'配料'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> 

這在這裏成功並動態代碼添加P標籤元素的文本從我的「成分」格到我的「買」 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的項目，這是動態的通過。對加入（「點擊」）'成分'，他們成功地從'買'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標籤能夠被添加到其他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); 

}); 

否則，新追加要素將不會有事件的約束。通過委託，該事件被綁定到一個將事件傳播給給定孩子的父容器。爲了提高性能，你應該從最近的靜態父代（我已經使用body爲了這個例子）委託事件。