복제 후 버튼이 작동하지 않습니다.

Question

목록 항목을 다른 목록에 복제하고 있습니다. 그러나 클론의 버튼 중 아무 것도 새 목록에서 작동하지 않습니다. 나는 혼란 스럽다. 어떤 아이디어?

JSfiddle : here

스크립트 : 동적으로 삽입 된 요소에 이벤트를 연결하기 위해

$(this).find(".add-playlist").on('click', function (ev) { 
     var $clone = $(this).parent().parent().parent().clone(true); 
     var $newbuttons = '<button class="btn btn-default clone" role="button">Clone</button><button class="btn btn-default delete" role="button">Delete</button>'; 
     ev.preventDefault(); 
     $clone.find('.tn-overlay').css({'top': '100%'}).end().find('.tn-buttons').html($newbuttons).end().appendTo($('#pl #da-thumbs')).hoverdir(); 
    }); 

$('.delete').click(function() { 
    $(this).parent().parent().parent().remove(); 
}); 

Answer 1

사용 event delegation. 보조 노트로

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

Updated Example

, 당신은 .closest()를 사용하기보다는 여러 .parent() 방법을 체인해야합니다.

이런 식으로 뭔가가 작동합니다 :..

$(document).on('click', '.delete', function() { 
    $(this).closest('.tn').remove(); 
});