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

2020/10/14 08:21 · javascript ·  · 0评论

我正在使用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是动态加载的元素。

谢谢。

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

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

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

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

尝试这个:

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

$.on()文档中:

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

#child当你调用元素不存在$.on()就可以了,因此事件未绑定(不同$.live())。#parent但是,确实存在,因此将事件绑定到此就可以了。

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

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

编辑:我正在提供更多有关此工作原理的信息,因为...的话。通过此示例,您将在整个文档上放置一个侦听器。

当您找到click匹配的任何元素时.selector,该事件就会冒泡到达主文档(只要没有其他侦听器调用此event.stopPropagation()方法),该事件将使事件冒泡至父元素。

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

出于某些原因,这很聪明,包括性能和内存利用率(在大型应用程序中)

编辑:

显然,可以监听的最接近的父元素更好,并且可以使用任何元素代替,document只要您要监视事件的子元素位于该父元素之内……但这确实没有任何事情要做。这个问题。

1.7中的.live()等效项如下所示:

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

基本上,请在文档中查看单击事件并为#child对其进行过滤。

我知道答案来得有点晚,但是我已经为.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()之前将其包括在内即可。

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

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

我在项目中使用了“ live”,但我的一位朋友建议我应该使用“ on”而不是live。当我尝试使用它时,我遇到了您遇到的问题。

在我的页面上,我动态创建按钮,表行和许多dom内容。但是当我对魔术使用时消失了。

其他解决方案,例如像孩子一样使用它,每次单击都会调用您的函数。但是我找到了使它再次发生的方法,这是解决方案。

将代码写为:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

致电caller(); 在这样的页面中创建对象之后。

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

通过这种方式,当您不是每次单击页面时都会调用您的函数。

本文地址:http://javascript.askforanswer.com/jquery-livevs-onfangfayongyuzaijiazaidongtaihtmlhoutianjiaclickshijian.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!