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()创建到web服务，该服务返回变量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

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

click

Answer 2

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

的信息

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

2 个答案: