jQuery 선택기에 새로 추가 된 요소가 표시되지 않는 이유

Question

"todo"를 간단히 표시하십시오. 한 번의 클릭으로 클래스 추가 "두 번째 클릭"항목 제거. 양식을 추가하여 새 항목을 추가합니다.

양식으로 새 목록 항목을 추가하면 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() { : (등 클릭에 제출에 ...)

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

이벤트 핸들러 없습니다 동적으로 생성 된 내용 (코드가 실행될 때 존재하지 않는 내용 디).

이 문제를 처리하려면 이 이벤트를 문서에 바인딩합니다.

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