Question

我正在制作一个应用程序，它通过JSON文件获取一些URL，并根据这些URL，从SoundCloud API获取一些数据。到目前为止没有问题。但是当它加载数据时，它会将每个数据放在<li>标记中。并且每个标记将根据收集的数据具有id值。现在我希望得到每个点击的<li>标记的值。但它不起作用。我认为因为它是动态制作的，但不知道任何解决方案。

这是我加载数据的代码：然后是在控制台中显示单击的<li>的函数：

$.each(data.PlayListArray, function(key, val){
                var track = answer[val.URL];
                var trackTitle = track.title;

                    $(".playerList .list").append(
                    "<li id=" + track.id +">" + 
                    "<h3 class=\"songTitle\">" + track.title + "</h3>" +
                    "</li>");
});

$(".playerList .list li").click(function(){
    console.log($(this).attr('id'));
});

这是完整代码的演示：http://jsfiddle.net/danials/3JsJe/3/

有什么想法吗？

Answer 1

使用event-delegation，因为您要在运行时附加这些元素。

$(".playerList .list").on('click','.playerList .list li',function(){
 console.log(this.id); 
});

Answer 2

您需要在类列表中为li编写事件，并且必须使用event delegation使用on()，因为li是通过ajax动态生成的，请执行以下操作：

    $(".playerList .list").on('click','li',function(){
    console.log(this.id);
});

UPDATED FIDDLE

为什么它不能通过jQuery找到id值

2 个答案: