javascript - JQuery 中的点击事件没有响应

Question

这个问题已经有答案了:

jQuery doesn't work after content is loaded via AJAX (9 个回答)

已关闭 9 年前。

我正在尝试使用 soundcloud API 制作一个特殊的 HTML5 播放器。此代码示例展示了如何从播放列表中获取播放列表中的每个轨道的轨道，我将一些带有轨道封面图像的 li 附加到 ul 列表中。

var url = 'http://api.soundcloud.com/playlists/44196539.json?client_id=3b3ca61a7c0afac8a6cfc678a24e23cf';

$.getJSON(url, function(playlist) {
$(playlist.tracks).each(function(i) {
console.log(playlist.tracks[i].title);
$('#liste').append('<li><img value='+playlist.tracks[i].stream_url+'   src='+playlist.tracks[i].artwork_url+'></li>');

     });
  });

之后我得到了他们，我就这样做了。在点击事件中，音频播放器的属性 src 将接收流音频的值。但问题是当我点击它时它没有响应。当我显示源代码时，我的图像就存在

$('img').click(function(){
    var x = $(this).attr('value');
    console.log(x);
    $('#player').attr("src",x+"?client_id=3b3ca61a7c0afac8a6cfc678a24e23cf");
});

任何有帮助的想法非常感谢。

Answer 1

使用event delegation

$('#liste').on("click" , "img" , function(){
    var x = $(this).attr('value'); 
    console.log(x);
    $('#player').attr("src",x+"?client_id=3b3ca61a7c0afac8a6cfc678a24e23cf");
});