jQueryセレクタに新しく追加された要素が表示されないのはなぜですか？

Question

単に "todo"をリストしてください。 ワンクリックでクラスを追加 "完了"して2回目にアイテムを削除します。フォームを追加して新しいアイテムを追加する

フォームで新しいリストアイテムを追加すると、jQueryセレクタ$（ 'li'）はこれを見ず、クラスを変更するときには考慮しません。以下の例のように

var $listItems = $('li'); 
 
var $list = $('ul'); 
 
var $form = $('#newItemForm'); 
 

 
// add item 
 
$form.on('submit', function(e){  
 
    e.preventDefault(); 
 
    $('ul').prepend('<li class = \"active\">' + $('input:text').val() + '</li>'); 
 
}); 
 

 
// set item class as 'done' and remove 
 
$('li').on('click', function(){ 
 
    
 
    if ($(this).hasClass('active')){   
 
     $(this) 
 
     .insertAfter($listItems.last()) 
 
     .attr('class','done');   
 
    } 
 
    else if($(this).hasClass('done')){ 
 
     $(this).remove();   
 
    } 
 
});

.active {background-color:red; color:#fff;} 
 
ul{ -webkit-padding-start: 0px; margin-bottom:15px;} 
 
ul li {margin-top:3px; list-style:none; line-height:35px; padding:0px 5px; border: 1px solid #808080; background-color: red;} 
 
.done {background-color: green;} 
 
body{width:250px; margin:0px auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id = "one" class="active">milk</li> 
 
    <li id = "two" class="active">cabbage</li> 
 
    <li id = "three" class="active">cucumber <em> bonus </em></li> 
 
    <li id = "four" class="active">honey</li> 
 
    <li id = "five" class="active">lemon</li> 
 
</ul> 
 
     
 
<form id="newItemForm"> 
 
    <input type="text" id="itemDescription" placeholder="Add name..." /> 
 
    <input type="submit" id="addButton" value="Add" /> 
 
</form>

Answer 1

使用$(document).on('click','li',function() {：（ETCクリック上、提出の上、...）

var $listItems = $('li'); 
 
var $list = $('ul'); 
 
var $form = $('#newItemForm'); 
 

 
// add item 
 
$form.on('submit', function(e) { 
 
    e.preventDefault(); 
 
    $('ul').prepend('<li class = \"active\">' + $('input:text').val() + '</li>'); 
 
}); 
 

 
// set item class as 'done' and remove 
 
$(document).on('click','li',function() { 
 

 
    if ($(this).hasClass('active')) { 
 
    $(this) 
 
     .insertAfter($listItems.last()) 
 
     .attr('class', 'done'); 
 
    } else if ($(this).hasClass('done')) { 
 
    $(this).remove(); 
 
    } 
 
});

.active { 
 
    background-color: red; 
 
    color: #fff; 
 
} 
 

 
ul { 
 
    -webkit-padding-start: 0px; 
 
    margin-bottom: 15px; 
 
} 
 

 
ul li { 
 
    margin-top: 3px; 
 
    list-style: none; 
 
    line-height: 35px; 
 
    padding: 0px 5px; 
 
    border: 1px solid #808080; 
 
    background-color: red; 
 
} 
 

 
.done { 
 
    background-color: green; 
 
} 
 

 
body { 
 
    width: 250px; 
 
    margin: 0px auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="one" class="active">milk</li> 
 
    <li id="two" class="active">cabbage</li> 
 
    <li id="three" class="active">cucumber <em> bonus </em></li> 
 
    <li id="four" class="active">honey</li> 
 
    <li id="five" class="active">lemon</li> 
 
</ul> 
 

 
<form id="newItemForm"> 
 
    <input type="text" id="itemDescription" placeholder="Add name..." /> 
 
    <input type="submit" id="addButton" value="Add" /> 
 
</form>

が

Answer 2

イベントハンドラではありません動的に作成されたコンテンツ（コード実行時に存在しないコンテンツd）。

これを処理するには、がイベントをドキュメントにバインドします。

$(document).on('click','li', function(){ 
    if ($(this).hasClass('active')){   
     $(this) 
     .insertAfter($listItems.last()) 
     .attr('class','done');   
    } 
    else if($(this).hasClass('done')){ 
     $(this).remove();   
    } 
});