jQuery函數append（）

Question

後沒有響應我創建了一系列div框，讓用戶使用jQuery從每個框中添加/刪除項目。我發現在向框中添加新元素後，我綁定到該元素的click函數將不會響應。這裏大概是我的代碼是什麼樣的：

$(".add").click(function() { 
$("#targetbox").append("<span class='remove'>This element was added</span>"); 
}); 

$(".remove").click(function() { 
alert("removing"); 
$(this).remove(); 
}); 

如果我預先填充#targetbox項目，他們響應點擊功能。只有動態添加的項目纔會響應該函數。

Answer 1

直接添加點擊的方法來你的新追加要素

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>") 
    .bind("click",function(e) { 
     alert("removing"); 
     $(this).remove(); 
    }); 
}); 

或使用將追加任何新.remove元素

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>"); 
}); 

$(".remove").live("click", function() { 
    alert("removing"); 
    $(this).remove(); 
}); 

Answer 2

您的代碼處理所有元素的點擊事件當前在$('.remove')。
任何不存在的元素都不受影響。

您需要調用.live()或.delegate方法，該方法將處理匹配選擇​​器的所有元素的事件，而不管它們何時創建。

例如：

$(".remove").live('click', function() { 
    alert("removing"); 
    $(this).remove(); 
}); 

Answer 3

這是因爲你的代碼運行時，該項目沒有添加。在添加點擊函數期間添加新點擊後，您需要添加刪除點擊功能以便將其動態分配給新塊。

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>"); 
    // Add code here for .remove click function 
});