javascript - jquery中自动调用的anchor标签onclick事件

Question

我对这个 jquery 代码块有疑问。我正在做的是，点击 anchor 标记，我正在创建一个 anchor 标记元素并将其附加到“currentFilters”div 元素。

通过 firebug 调试时，我可以看到 anchor 元素被添加到 div 中，然后 jquery 自动再次调用 onclick 所以我的 anchor 标记被创建了两次。

不确定如何自动再次触发 onclick 事件。

此外，在页面加载时，此功能按预期工作。但随后我对服务器进行 ajax 调用并在同一页面中创建更多元素。然后它不起作用,,

$(document).ready(function() {                  
    $(".matchTypeCheckbox").click(function() {                  
        var parent = "parent_"  + $(this).attr('id');

        $('#' + parent).removeClass("").addClass("active");

        var newElement = 
        "<a tagid='"+ $(this).attr('id')
            + "' tagtype='mt' href='#' class='rTag'><span class='rTag'>X</span>"
            + $(this).text();
        +"</a>";

        $('.currentFilters').append(newElement);

    });                     
});

Answer 1

it works fine on page load, only doesnt work after ajax call

和

But then I am doing ajax call to the server and creates more elements in the same page. then it does not work

当你打电话时

$(".class").click(function() ...

它将那个匿名/内联函数绑定(bind)到所有具有类“class”(在本例中)的元素 - 在调用 click() 时存在。

这就是为什么我们使用 $(function() {(或 $(document).ready，同样的事情)，以便 点击 事件在 DOM 元素被创建并且它们已经存在之后被连接起来(以附加事件)。

如果您随后创建新元素

$('.currentFilters').append(newElement);

之前对文档就绪的调用已经被调用，因此不会应用于新元素。

有两种解决方法:

调用 append 之后，还要附加点击事件处理程序(这最适合使用单独的函数而不是 anon/inline)，类似于(未测试，ottomh):

$(function() { 
  $(".class").click(clickHandler);
});

$('.currentFilters').append(newElement);
newElement.click(clickHandler)

或者使用事件委托(delegate)，比如:

$(function() {
    $(document).on("click", ".class", clickHandler);
});