將數據添加到動態創建的元素並綁定事件

Question

我試圖將一個點擊事件綁定到一個動態創建的元素。由於我需要在被點擊後識別出確切的元素，因此我試圖保存附加ID到它。目前看起來像這樣：

var li = '<li class="item" data-type=' +$(this).attr("type")+' data-path="file://'+$(this).attr("path")+'" data-id="'+$(this).attr("id")+'">' + $(this).attr('name') + "</li>"; 
$(li).bind("click", {id : $(this).attr("data-id")}, function(event){ 
    console.log("ID: " + event.data.id); 
}); 
$("#playlistfiles").append(li); 

不幸的是，如果單擊元素時沒有任何反應。我知道這可能是重複的，但經過一段時間的搜索後，我無法解決問題。

乾杯， stiller_leser

Answer 1

那是因爲你創建一個jQuery對象，但不使用它。您可以使用.appendTo()方法。

$(li).bind("click", {id : $(this).attr("data-id")}, function(event){ 
    console.log("ID: " + event.data.id); 
}).appendTo('#playlistfiles'); 

或者：

var $li = $(li).bind("click", {id : $(this).attr("data-id")}, function(event){ 
    console.log("ID: " + event.data.id); 
}); 

$("#playlistfiles").append($li); 

爲什麼出現這種情況？

li是AA串，由字符串傳遞給jQuery的創建一個唯一的對象，$(li)返回一個jQuery對象，.bind()將處理程序，然後像許多其他jQuery方法返回當前集合，返回的值是一個jQuery因爲您沒有存儲重新調用的值，因此實際上會被丟棄，並且.append(li)僅附加原始字符串而不是創建的對象。