Question

我对这个jquery代码块有疑问。我正在做的是，onclick on anchor tag，我正在创建一个锚标记元素并将其附加到'currentFilters'div元素。

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

不确定如何自动再次触发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

它在页面加载时工作正常，但在ajax调用后才起作用

和

但后来我正在对服务器进行ajax调用，并在同一页面中创建更多元素。然后它不起作用

致电时

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

它将匿名/内联函数绑定到具有类“class”的所有元素（在此示例中） - 在调用click（）时存在。

这就是为什么我们使用$(function() {（或$(document).ready，同样的事情），以便在创建DOM元素并且它们已经存在之后连接click事件（到附上活动。）

如果您随后创建新元素

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

上一次调用文档就绪已经被调用，因此不会应用于新元素。

有两种解决方法：

在调用append之后，还附加了click事件处理程序（这最适合使用单独的函数而不是anon / inline），类似于（未经测试的，ottomh）：

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

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

或使用事件委托，例如：

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

在jquery中自动调用的锚标签onlick事件

1 个答案: