jQuery单击功能没有将click事件附加到锚点

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()创建到webservice，它在变量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);
    };

如上所示，我正在尝试将点击功能绑定到每个图像链接。 但是这不起作用（有或没有unbind() ）。

运行上面的代码后，如果我检查开发工具中的图像链接，我可以看到已经有两个点击事件附加到缩略图。 这些都不是我上面的功能。 它们的路径来自页面上嵌入的其他应用程序库：一个标记为“jQuery”，另一个标记为“Bubbling”和“DOM2”。 我猜这是附加事件，这意味着我不能在上面添加我的事件，但我不知道jQuery或javascript知道这是否属实（我通常是服务器端开发人员，我不喜欢根本不知道前端的东西。）

关于我如何获得为这些元素工作的点击事件的任何建议将非常感激，因此我可以用我需要运行的代码替换上面的演示代码。

Answer 1

您只需将click事件绑定到页面上已存在的父元素即可。

$('#foo-bar-baz').on('click', '.foo-bar-thumbnail-image', function(){
  // what you want to happen when click 
  // occurs on elements that match '.foo-bar-thumbnail-image'
  // within '#foo-bar-baz'
  alert("I am thumbnail " + $(this).id);
});

Answer 2

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