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

2022-08-30 01:02:16

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

我遇到的问题是,当动态加载html到元素中使用:

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

如果我尝试在之后添加一个点击事件,它不会使用以下任一方法注册该事件:

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

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

实现此功能的正确方法是什么?对我来说,它似乎只与.live()一起使用,但我不应该使用这种方法。请注意,#child是动态加载的元素。

谢谢。


答案 1

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

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

事件处理程序将附加到对象,并且每当源自 该对象的单击事件冒泡时,它将触发您的单击处理程序。这称为委托事件处理(事件处理委托给父对象)。#parent#child

之所以这样做,是因为即使对象尚不存在,您也可以将事件附加到对象,但是当它以后存在并被单击时,单击事件将冒泡到对象,它将看到它起源于对象,并且有一个事件处理程序用于单击并触发您的事件。#parent#child#parent#child#child


答案 2

试试这个:

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

来自 $.on() 文档:

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

当您调用元素时,它不存在,因此事件未绑定(与 )。,但是确实存在,因此将事件绑定到该事件是可以的。#child$.on()$.live()#parent

我上面的代码中的第二个参数充当“过滤器”,仅当事件冒泡到 from 时才触发。#parent#child