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

Question

我正在制作一个应用程序，该应用程序通过 JSON 文件获取一些 URL，并根据这些 URL 从 SoundCloud API 获取一些数据。到目前为止没有问题。但是当它加载数据时，它把每一个都放在一个 <li> 中标签。每个标签都有一个基于收集到的数据的 id 值。现在我想获得每次点击的值(value) <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); 
});