은 버튼 삭제 확인 절차 적

Question

나는 HTML이 :

<button id='pusher'>pusher</button> 

<ul id="sortable"> 
    <li>things here</li> 
</ul> 

그리고 자바 스크립트 :

$(".del").click(function(e) { 
    $(this).parent().remove(); 
}); 


$("#pusher").click(function(e) { 
    var text = "test"; 
    var lix = $("<li class='uix' />").text(text); 
    lix.append($('<button class="del">xx</button>')); 
    lix.appendTo($("#sortable")); 
}); 

가 나는 경우 삭제 푸셔 버튼을 누른 다음 내부의 삭제 버튼, 새로운 <li> 요소를 만들 수 있도록하기 위해 노력하고있어 버튼을 누를 경우 <li> 요소가 삭제됩니다 ...

그러나 삭제되지는 않습니다.

아이디어가 있으십니까?

Answer 1

$(".del").click(function(e) { 

이는 그것이 실행 때 존재 .del 요소에 결합합니다. .live을 사용하려고합니다.

$(".del").live('click', function(e) { 
    $(this).parent().remove(); 
}); 

추가 할 때마다 이벤트를 요소에 바인딩합니다.

편집 : .live은 더 이상 사용되지 않습니다. 대신 .on을 사용해보세요.

$(document).on('click', '.del', function(e) { 
    $(this).parent().remove(); 
}); 

Answer 2

문제의 원인은 .click을 사용하여 처리기를 바인딩 할 때 요소가 존재하지 않기 때문입니다. 당신은 .live를 사용할 수 있지만 당신이 요소를 제어하기 때문에 더 나은 솔루션은 동적 핸들러를 연결하는 것입니다

function deleteClicked(e) { 
    $(this).parent().remove(); 
} 

$(".del").click(deleteClicked); 


$("#pusher").click(function(e) { 
    var text = "test"; 
    var lix = $("<li>").addClass('uix').text(text); 
    lix.append($('<button>').addClass('del').text('xx').click(deleteClicked)); 
    lix.appendTo($("#sortable")); 
}); 

Answer 3

jQuery를 사용해야합니다. on || live 현재 및 미래의 현재 선택기와 일치하는 모든 요소에 대한 이벤트 처리기를 연결할 이벤트 바인딩입니다.

는 jQuery를 1.7+

$(document).on('click', '.del', function(e) { 
    $(this).parent().remove(); 
}); 

jQuery를 1.3 이상

$('.del').live('click', function(e) { 
    $(this).parent().remove(); 
});