jQuery单击事件未触发自定义事件处理程序答案

【问题标题】：jQuery click event not firing custom event handlerjQuery单击事件未触发自定义事件处理程序
【发布时间】：2014-12-09 23:47:19
【问题描述】：

我使用一个 jQuery 库来动态创建一个带有点击事件的链接，例如：

$parent.append('<div class="add-row"><a href="javascript:void(0)">Add another contact</a></div>');
addButton = $parent.find("div:last a");

addButton.click(function(e){
    e.preventDefault();
    load_contact_creation_form();
});

我想在我的页面中添加一些代码，以便当 URL 包含特定标志时，addButton.click 事件会自动触发。

使用 Firefox/Chrome 调试工具检查，我可以很容易地找到链接：

$('.add-row a')

但是，尝试使用$('.add-row a').click() 来点击它不会触发自定义的“点击”事件。

为什么.click() 和真正的鼠标点击之间存在差异？在这种情况下，如何触发自定义 click 事件处理程序？生成链接的代码是外部库，不能随便修改。

【问题讨论】：

您说当您调用.click() 时它不会触发，但没有提及当您实际单击它时它是否触发。是吗？
这可能与您的href="javascript:void(0)" 有关。它可能会调用 void(0) 而不是您的点击事件。

标签： javascript jquery

【解决方案1】：

这对我来说似乎按预期工作。检查这个小提琴：http://jsfiddle.net/d3s8topL/

$("#addDiv").click(function (){

    $("#test").append('<div class="add-row"><a href="javascript:void(0)">Add another contact</a></div>');
    var addButton = $("#test").find("div:last a");

    addButton.click(function(e){
        e.preventDefault();
        alert("asdasd");
    });

});

$("#triggerClick").click(function () {

    $(".add-row a").click();
});

【讨论】：

【解决方案2】：

您需要MutationOberserver，但是，Mutation Observer API 仅在较新版本的 Google Chrome (>= 18) 和 Mozillza Firefox (>= 14) 中可用。因此，您可以为此使用jQuery plugin。使用插件，你可以做到

$('.add-row').observe("childlist", "a", function(){
   $(this).click(); // trigger
});

【讨论】：