jQuery .live()vs .on()方法,用于在加载动态html后添加click事件

Question

我正在使用jQuery v.1.7.1,其中.live()方法显然已被弃用.

我遇到的问题是,当使用以下方法动态将html加载到元素中时:

$('#parent').load("http://..."); 

如果我之后尝试添加click事件,则不会使用以下任一方法注册事件:

$('#parent').click(function() ...); 

要么

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

实现此功能的正确方法是什么？它似乎只适用于.live(),但我不应该使用该方法.请注意,#child是动态加载的元素.

谢谢.

Answer 1

如果您希望click处理程序适用于动态加载的元素,那么您可以在父对象上设置事件处理程序(不会动态加载)并为其提供一个与您的动态对象匹配的选择器,如下所示:

$('#parent').on("click", "#child", function() {});

事件处理程序将附加到#parent对象,并且只要点击事件冒泡到它起源#child,它就会触发您的点击处理程序.这称为委托事件处理(事件处理委托给父对象).

它是以这种方式完成的,因为你可以将事件附加到#parent对象,即使#child对象尚不存在,但是当它稍后存在并被点击时,click事件将冒泡到#parent对象,它将看到它起源于#child和有一个事件处理程序,用于单击#child并触发您的事件.

Answer 2

试试这个:

$('#parent').on('click', '#child', function() {
    // Code
});

从$.on()文档:

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用时页面上.on().

#child当您调用$.on()它时,您的元素不存在,因此事件不受约束(不像$.live()).#parent但是,确实存在,所以将事件绑定到那就好了.

以上在我的代码的第二个参数作为一个"过滤器",以仅触发事件是否鼓泡到#parent从#child.

Answer 3

$(document).on('click', '.selector', function() { /* do stuff */ });

编辑:我提供了更多关于它如何工作的信息,因为...单词.在此示例中,您将在整个文档上放置一个侦听器.

当你click在任何匹配的元素上时.selector,事件会冒泡到主文档 - 只要没有其他侦听器调用event.stopPropagation()方法 - 这会将事件冒泡到父元素之上.

您正在侦听来自与指定选择器匹配的元素的任何事件,而不是绑定到特定元素或元素集.这意味着您可以一次创建一个侦听器,该侦听器将自动匹配当前现有元素以及任何动态添加的元素.

这很聪明,原因有几个,包括性能和内存利用率(在大型应用程序中)

Answer 4

1.7中的.live()相当于:

$(document).on('click', '#child', function() ...); 

基本上,观察单击事件的文档并为#child过滤它们.

Answer 5

我知道答案有点晚了,但我已经为.live()方法创建了一个polyfill.我在jQuery 1.11中测试过它,它看起来效果很好.我知道我们应该尽可能地实现.on()方法,但是在大型项目中,无论出于何种原因,都无法将所有.live()调用转换为等效的.on()调用,以下可能工作:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

只需在加载jQuery之后和调用live()之前包含它.

Answer 6

.on()适用于jQuery 1.7及以上版本.如果您使用的是旧版本,请使用以下命令:

$("#SomeId").live("click",function(){
    //do stuff;
});