将数据添加到动态创建的元素和绑定事件

时间:2013-09-29 23:23:50

标签: javascript html5 dynamically-generated jquery

我正在尝试将click事件绑定到动态创建的元素。由于我需要在点击之后识别确切的元素,我正在尝试保存附加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

1 个答案:

答案 0 :(得分: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是一个字符串,通过将字符串传递给jQuery创建一个唯一对象,$(li)返回一个jQuery对象,.bind()添加一个处理程序,然后像许多其他jQuery方法一样返回当前集合,返回的值是一个实际被丢弃的jQuery对象,因为您没有存储重新调整的值,.append(li)只附加原始字符串而不是创建的对象。