jquery - 如何使用 Jquery 为运行时添加的图像添加点击功能？

Question

我有一个 HTML 表格标记，当用户单击时在浏览器上生成。这是代码

$('#selectedtable > tbody:first').append(
    '<tr > ' +
        '<td>Chair</td>' +
        '<td><img src="/Content/images/showinfo.png" title="Show Info"></td>' +
    '</tr>'
    );

所以我的问题是可以为上面生成的图像添加点击事件吗？

Answer 1

是的，您可以在将图像添加到 dom 之后添加 onclick 处理程序，使用

$("#my-image").click(function() {
     alert("I've been clicked");
});

（对于带有 id 的图像my-image）

或者您可以设置一个将应用于所有未来添加的元素的处理程序：

$(document).on("click", ".image-class", function() {
     alert("I've been clicked");
});

（对于带有类的图像.image-class）

Answer 2

假设页面加载时 ID 为 #selectedtable 的元素存在，使用.on()的事件委托语法：

$('#selectedtable').on('click', 'img', function(){...})

Answer 3

它被添加到 DOM，因此您应该能够像选择任何 DOM 元素并添加您想要的任何事件处理程序一样选择它。