javascript - 如何使用 jQuery 选择在具有多个图像的 div 中返回的图像？

Question

下面的图片都是通过这个 JavaScript/jQuery 返回并显示在页面上的:

for(var j = 0; j < imageURLs.length; j++){
    $('#imgs').append("<img src='" + imageURLs[j] + "'/>");  
    $('#username').append(Username[j]); 
}

HTML:

<div id="imgs"></div>

我希望用户能够单击任何图像并将图像/用户名传递到变量中。

我以为我可以使用 $this 来选择单独的图像/用户名，但似乎每次都返回“imgs”。我如何使用 jQuery 来选择和捕获实际的用户名/图像？我需要在添加项目之前使用 .mouseover() 吗？

$('imgs').click(function(event){
         event.preventDefault();
         var selectedFriend = $(this).attr("id");
         console.log(selectedFriend);
     });
});

Answer 1

您的选择器不正确。当您使用 $('imgs') 时，jQuery 正在搜索不存在的 imgs 元素.因此，您需要将选择器更改为 ID selector

除上述之外，您正在动态创建 img 元素，因此您需要使用 Event Delegation

$('#imgs').on('click', 'img', function (event) {
    event.preventDefault();
    var selectedFriend = $(this).attr("id");
    console.log(selectedFriend);
});