1

为什么会这样：

$.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"); 
});

使用 jQueryv1.7.2

4

4 回答 4

7

首先，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 事件进行此处理。

于 2012-08-09T14:05:21.147 回答
3

尝试

$('body').on("click", "#clickme", function() {
    alert("Hai"); 
});

您的第二个片段无法按预期工作，因为当您附加处理程序时，该元素#clickme尚不存在

于 2012-08-09T14:04:48.323 回答
0

改用这个：

$(document).on("click", "#clickme", function() { alert("Hai"); });

这应该有效。

于 2012-08-09T14:06:49.667 回答
0

因为在第二种情况下，您尝试设置点击处理程序的元素在 pageLoad 上不存在。

如果您像这样使用 .on() ：

$("body").on("click", "#clickme", function()
{
    alert("Hi"); 
});

它会起作用，因为您会将事件附加到页面加载时存在的正文标记，然后仅在触发单击事件时才解决#clickme 的选择。

但是比“body”（为了性能）更好的是在 DOM 下方的一些容器，您知道它们将存在于页面加载中。

于 2012-08-09T14:11:56.330 回答