jQuery對附加項目的點擊操作

Question

看過文檔後，我知道問題在於我要刪除的項目正在追加。雖然從我可以看到使用.on應該允許這一點。我正在用一個按鈕將一些內容附加到列表中，我想在點擊時刪除附加內容。

<ul id="children"> 
    <li id="child1"> 
     <label class="narrow-full">Child</label> 
     <?php echo form_dropdown('year[]', $years, date('Y')); ?> 
    </li> 
</ul> 

var c = 1; 
    $(".child-add").click(function() { 
     $("#child1").clone().append("<span class='child-delete ui-icon ui-icon-trash inline-block'></span>").attr('id', 'child'+(++c)).appendTo("#children"); 
    }); 

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

內容追加罰款，但重新啓動的點擊功能不會觸發。但是，如果內容已經在頁面上，例如它可以工作。後面沒有附加。

Answer 1

只要child-delete被附加到DOM，$('.child-delete').on('click', ..)將無法​​正常工作，因爲jQuery無法找到它。

而是使用event delegation：

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