jquery - 为什么 AJAX 请求创建的事件触发器必须位于 AJAX 请求本身中？

Question

为什么这有效:

$.ajax(
{
    url: "/some/url.php",
    data: { s:"stuff" },
    success: function(result)
    {
        // Result being <button id="clickme">Click me!</button>
        $("#container").html(result); 

        // Event trigger *in* AJAX
        $("#clickme").on("click", function()
        {
           alert("Hai"); 
        });
    }
});

这不会:

$.ajax(
{
    url: "/some/url.php",
    data: { s:"stuff" },
    success: function(result)
    {
        // Result being <button id="clickme">Click me!</button>
        $("#container").html(result); 
    }
});

// Event trigger outside AJAX, for better overview, like event grouping, 
// shorter AJAX functions, etc
$("#clickme").on("click", function()
{
    alert("Hai"); 
});

使用 jQuery v1.7.2

Answer 1

首先，on 不使用带有该签名的委托(delegate)。这意味着它直接将事件监听器附加到找到的元素。

其次，您的第二个代码在发出 ajax 请求之前执行，因此此时找不到任何元素，并且代码不会附加任何事件监听器。

如果您想在 on 上使用委托(delegate)，签名如下:

$(document).on( "click", "#clickme", function(){

});

其中document 应该是最接近的静态父元素 - 但它也适用于document(这就是.live毕竟是这样)

document 是可靠的，因为它始终存在。但是，如果您此时可以在 DOM 中找到更接近的静态父元素，那么您宁愿委托(delegate)给它。

<小时/>

不推荐 document、"body" 等的原因是它们会增加页面上所有 type 事件的处理开销。

考虑$(document).on("mousemove", ".myElement", fn);

现在，每当鼠标在页面上移动时，除非传播被较低级别的监听器停止，否则 jQuery 必须处理整个传播路径每次查看传播路径中是否有任何元素与给定的 .myElement-选择器匹配。

如果您改为添加 $("#element").on("mousemove", ".myElement", fn);，则仅对发生的 mousemove 事件进行此处理在页面上的“#element”区域中。