$(document).on("click"... 不工作？答案

【问题标题】：$(document).on("click"... not working?$(document).on("click"... 不工作？
【发布时间】：2013-07-11 23:36:04
【问题描述】：

我在这里犯了一个众所周知的错误吗？

我有一个使用 .on() 的脚本，因为元素是动态生成的，但它不起作用。只是为了测试一下，我用动态元素的 wrap 替换了选择器，它是静态的，但它仍然不起作用！但是，当我切换到普通的旧 .click 进行换行时，它起作用了。
（这显然不适用于动态元素，重要的是。）

这行得通：

$("#test-element").click(function() {
    alert("click");
});

这不是：

$(document).on("click","#test-element",function() {
    alert("click");
});

更新：

我右键单击并在 Chrome 中执行“检查元素”以仔细检查某些内容，然后单击事件起作用。我刷新了，但它不起作用，检查了元素，然后它起作用了。这是什么意思？

【问题讨论】：

您是否创建了多个具有相同 ID 的元素？
只发布没有相关 HTML 的 jQuery 很难提供帮助。
你好 OP，请检查您使用的 Jquery 版本，:) 或轻弹小提琴，我可能会帮助您，
您的代码应该可以工作。 on 函数是在 jquery 1.7 中添加的，请确保您拥有最新版本。编辑：proof for you that it works on fiddle
您的第二个示例适用于最新的 1.x 版本的 jQuery：jsfiddle.net/AJPdS

标签： jquery click

【解决方案1】：

您正在使用正确的语法绑定到文档以侦听 id="test-element" 元素的点击事件。

可能由于以下原因之一无法正常工作：

未使用最新版本的 jQuery
未将代码包装在 DOM 中准备就绪
或者您正在做的事情导致事件不会冒泡到文档上的侦听器。

要捕获在声明事件侦听器之后创建的元素上的事件 - 您应该绑定到父元素或层次结构中更高的元素。

例如：

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

在本例中，只会触发“绑定到文档”警报。

JSFiddle with jQuery 1.9.1

【讨论】：

不幸的是，我使用的是最新版本的 Jquery，我的代码已正确包装，它位于 $(document).ready 内部，并且被单击的事件是文档中的最低级别元素。这令人费解。
我会说“需要将监听器放在父元素上”不是必需的，尽管我也推荐它。冒泡是 .on() 起作用的原因。如果我们不能依靠冒泡绕过直接父级，那将不是一个很好的解决方案。
@iGanja - 很好，正如您所建议的，“需要”不是正确的词，因为还有其他不太理想的方法来实现这一点。我修改了答案。
如果我使用“this”来引用元素对象，那么我如何将它的事件附加到文档中..
@JasonGlisson 我的猜测是，当你在文档上有一个监听器时，要么是事件没有冒泡的问题（通过单击按钮），要么是 @987654323 之间的区别@ 和 event.currentTarget 在您的代码中的某处，但有很多事情可能包括按钮上禁用的指针事件

【解决方案2】：

您的代码应该可以工作，但我知道答案对您没有帮助。你可以看到一个工作示例here (jsfiddle)。

jquery：

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

正如有人已经指出的那样，您使用的是 ID 而不是类。如果页面上有多个具有 ID 的元素，则 jquery 将返回 仅返回具有该 ID 的第一个元素。不会有任何错误，因为它是这样工作的。如果这是问题所在，那么您会注意到 click 事件适用于第一个 test-element，但不适用于后面的任何一个。

如果这不能准确描述问题的症状，那么您的选择器可能是错误的。您的更新使我相信这是因为检查了一个元素然后再次单击该页面并触发了单击。如果您将事件侦听器放在实际的document 而不是test-element 上，可能会导致这种情况。如果是这样，当您单击文档并重新打开（例如从开发人员窗口返回文档）时，该事件将触发。如果是这种情况，您还会注意到，如果您在两个不同的选项卡之间单击，就会触发 click 事件（因为它们是两个不同的 documents，因此您正在单击文档。

如果这些都不是答案，那么发布 HTML 将有助于解决这个问题。

【讨论】：

【解决方案3】：

一个老帖子，但我喜欢分享，因为我有同样的情况，但我终于知道问题了：

问题是：我们制作了一个函数来处理指定的 HTML 元素，但是与该函数相关的 HTML 元素尚未创建（因为该元素是动态生成的）。为了让它工作，我们应该在创建元素的同时创建函数。元素优先于相关函数。

简单来说，一个函数只对在它之前创建的元素（他）起作用。任何动态创建的元素都意味着在他之后。

但是请检查这个没有注意上述情况的样本：

<div class="btn-list" id="selected-country"></div>

动态附加：

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

点击按钮，此功能运行良好：

$(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

或者你可以像这样使用正文：

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

与此相比，它不起作用：

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

希望对你有帮助

【讨论】：

如果您以 $(document).on("click"... $(document ).on("click","#selected-country",function() { });

【解决方案4】：

这行得通：

<div id="start-element">Click Me</div>

$(document).on("click","#test-element",function() {
    alert("click");
});

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

这里是Fiddle

【讨论】：

根据问题，这不是动态生成的元素。
@itsmejodie - 同意，但它是动态绑定到事件处理程序的。更改 id 本质上与附加 DOM 元素没有什么不同。

【解决方案5】：

试试这个：

$("#test-element").on("click" ,function() {
    alert("click");
});

这样做的文档方式也很奇怪。如果用于类选择器，这对我来说是有意义的，但在 id 的情况下，您可能只是在那里遍历无用的 DOM。对于 id 选择器，您可以立即获得该元素。

【讨论】：

这与$("#test-element").click(function() { 有何不同？
您必须使用 .on() 将事件绑定到动态生成的 DOM - 与 .click() 绑定的任何内容都会在文档准备好并且 dom 不存在时尝试绑定什么都不会发生。
但是使用.on而不使用selector与直接应用点击事件是一样的
这不是问题的正确答案。这将直接绑定到元素，因此不适合动态生成元素。
我实际上已经阅读了文档，但是关于性能的部分实际上与委托事件处理程序没有任何关系，并且您的代码不是委托事件处理程序。

【解决方案6】：

如果此代码即使在文档准备好的情况下也不起作用，则很可能您在 js 文件中的某处为该按钮分配了 return false;，如果是按钮，请尝试将其更改为 ,span,anchor 或 div 并测试是否它正在工作。

$(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
});

【讨论】：