jquery - $(document).on ("click"... 不工作？

Question

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

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

这个有效:

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

这不是:

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

更新:

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

Answer 1

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

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

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

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

例如:

$(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>');
});

在此示例中，只会触发“绑定(bind)到文档”警报。

JSFiddle with jQuery 1.9.1