为什么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不使用具有该签名的委托.这意味着它直接将事件监听器附加到找到的元素.

其次,你的第二个代码是在发出ajax请求之前执行的,所以此时没有找到任何元素,代码也没有附加任何事件监听器.

如果你想使用委托on,签名如下:

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

});

哪里document 应该是最接近的静态父元素 - 但它也适用document(.live毕竟这是什么)

document是可靠的,因为它总是在那里.但是如果你有一个更接近静态的父元素,可以在DOM中的这一点找到,你可以宁愿委托给它.

不建议使用原因document,"body"因为它们会为type页面上的所有事件添加处理开销.

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

现在,只要鼠标在页面上移动,除非传播被较低级别的侦听器停止,jQuery每次都必须处理整个传播路径,以查看传播路径中的任何元素是否与给定的.myElement-selector 匹配.

如果您改为添加$("#element").on("mousemove", ".myElement", fn);,则只"#element"对页面区域中发生的mousemove事件执行此处理.