javascript - jQuery 点击功能没有将点击事件附加到 anchor

Question

HTML

内部<div id='foo-bar-baz'>我有一系列具有唯一 ID 的图片链接，如下所示

<a href=''><img id='12341234' class='foo-bar-thumbnail-image' src='/path/to/image.jpg'></a>
<a href=''><img id='56785678' class='foo-bar-thumbnail-image' src='/path/to/image.jpg'></a>

Javascript/JQuery

上面的div是由$.get()创建的到一个网络服务，它在变量 response 中返回一大块 HTML .成功时，$.get()调用以下函数:

var thumbnailsDiv = function (response) 
    {
        var json = $.parseJSON(response);
        $('#foo-bar-baz').html(json.html);
        alert("Setting click functions on thumbnails");
        $('.foo-bar-thumbnail-image').unbind().click(function () {
            alert("I am thumbnail " + $(this).id);
        }, false);
    };

正如您在上面看到的，我试图将点击功能绑定(bind)到每个图像链接。然而，这不起作用(有或没有 unbind() )。

上面的代码运行后，如果我检查开发工具中的图像链接，我可以看到缩略图已经附加了两个点击事件。这些都不是我上面的功能。它们的路径都来自页面上嵌入的其他应用程序库:一个标记为“jQuery”，另一个标记为“冒泡”和“DOM2”。我猜是这些附加事件意味着我不能在上面添加我的事件，但我对 jQuery 或 javascript 的了解还不够，无法知道这是不是真的(我通常是服务器端开发人员，我不知道根本不懂前端。)

任何有关我如何获得适用于这些元素的点击事件的建议都将不胜感激，这样我就可以用我需要运行的代码替换上面的演示代码。

Answer 1

您应该使用 $(document).on('click','.foo-bar-thumbnail-image',function() ... 而不是 $.click (function()... 因为事件处理程序位于通过 JS 在页面上呈现的元素上。这是一个“委托(delegate)”事件处理程序 - 您可以在此处阅读更多信息 https://learn.jquery.com/events/event-delegation/