動的に追加されたリストアイテムが `on`イベントで動作しない

Question

ulにリストアイテムを追加すると、jQuery onイベントが発生したり、動作しないようです。私の理解から、.click()の代わりにonを使用すると、HTMLで作成されたものであれ、javascript/etcで後で追加されたものであれ、すべての項目に対して機能するはずです。

<div class="container"> 
    <div class="list">TO-DO LIST<div class="glyphicon glyphicon-plus"></div></div> 
    <ul class="toDoList" style="list-style: none;"> 
     <li id="addToDo"><input type='text' id="addToDoText" placeholder="Add New ToDo"></input></li> 
     <li><span><i class="fa fa-trash"></i></span>Buy Robes</li> 
     <li><span><i class="fa fa-trash"></i></span>Fight Malfoy</li> 
     <li><span><i class="fa fa-trash"></i></span>Buy New Wand</li> 
     <li><span><i class="fa fa-trash"></i></span>Kill Voldemort</li> 
     <li><span><i class="fa fa-trash"></i></span>Feed Hedwig</li> 
     <li><span><i class="fa fa-trash"></i></span>Send Owl to Sirius</li> 
     <li><span><i class="fa fa-trash"></i></span>Do Dishes</li> 
     <li><span><i class="fa fa-trash"></i></span>Wash Robes</li> 
     <li><span><i class="fa fa-trash"></i></span>Buy Hagrid's Birthday Gift</li> 
    </ul> 
</div> 

と私のjQueryの：私はアイテムを追加し、TNE項目をクリックすると

$('ul.toDoList li').on("click", function(){ 
    $(this).toggleClass('completedItem'); 
}); 

$("input").on("keypress", function(e){ 
    if(e.which == 13){ 
     new_text = $(this).val(); 
     $(this).val(""); 
     add_toDo(new_text); 
    } 
}); 

$('li .fa-trash').on("click", function(){ 
    $(this).closest('li').remove(); 
}); 

function add_toDo(item){ 
    console.log("adding: "+item); 
    $('ul.toDoList').append('<li><span><i class="fa fa-trash"></i></span>'+item+'</li>'); 
}; 

、それはcompletedItemクラスをトグルしない、また私はfa-trashアイコンをクリックして削除することができます。

Answer 1

リサーチ.on（）と.click（）jquery関数の詳細on（）を使用して特定のすべての要素にbindイベントを呼び出さない場合、その前のセレクタはこの関数によって影響を受ける要素を選択します。どんな方法でもDOMに新しい要素を追加するので、jqueryは新しい要素を追加する前に古い要素をキャッシュし、新しい要素を完全に認識しません。このコードは次のように編集されています：

$(document).on("click", "ul.toDoList li", function(){ 
    $(this).toggleClass('completedItem'); 
}); 

$(document).on("click", "li .fa-trash", function(){ 
    $(this).closest('li').remove(); 
});