通过AJAX加载后图像无法点击

Question

我有一组通过jQuery AJAX加载的图像。出于某种原因，我的点击处理程序在点击时不会触发。

JavaScript的：

$(document).ready(function()
{
    $('img.delete_related_sub').click(function()
    {
    alert('testing');
    });

    //I added this part to test, because the above wasn't working...
    $(document).click(function(event)
    {
    alert(event.target.tagName+' '+event.target.className);
    });
});

HTML：

<img data-rsid="2" class="delete_related_sub" src="image.png" />

所以我的第二次点击处理程序通过“IMG delete_related_sub”提醒我。但第一个没有被触发。它实际上位于一个表中，该表实际上位于由引导选项卡运行的窗格中，但不确定它是否真的有用。

Answer 1

尝试这样

$(document).on('click', 'img.delete_related_sub', function() {
    alert('testing');
});

只需将document替换为图片的静态父级。

Answer 2

使用此：

$("body").on('click', 'img.delete_related_sub', function() {
    alert('testing');
});

或者，在success:中给出：

$('img.delete_related_sub').click(function() {
    alert('testing');
});

Answer 3

因为绑定事件的行在添加元素之前运行，请尝试使用

$(parent).on('click', 'img.delete_related_sub', function() {});

其中parent是一个静态元素，肯定会存在。这是有效的，因为事件绑定到实际存在的元素，然后检查以匹配您的选择器。有关详细信息，请参阅.on()。

像

这样的东西

$(document).on('click', 'img.delete_related_sub', function() {});

会正常工作。

Answer 4

$('.delete_related_sub').live("click", function()
{
    alert('testing');
});

使用直播活动收听点击次数