首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么在()上使用jQuery而不是click()

为什么在()上使用jQuery而不是click()
EN

Stack Overflow用户
提问于 2012-04-10 09:36:27
回答 7查看 98K关注 0票数 87

目前使用jQuery时,当我需要做一些事情时,当点击发生时,我会这样做……

代码语言:javascript
复制
$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

我正在看别人在项目上的一些代码,他们是这样做的……

代码语言:javascript
复制
$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

请注意,据我所知,它似乎做了同样的事情,只是它们使用的是live()函数,该函数现在已被弃用,jQuery文档说要使用on()代替,但不管怎样,为什么要使用live/on()而不是我的第一个示例呢?

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2012-04-10 09:43:06

因为您可能有一个动态生成的元素(例如,来自AJAX调用),所以您可能希望拥有先前绑定到相同元素选择器的相同单击处理程序,然后使用带有选择器参数的on()“委托”单击事件

要演示,请执行以下操作:

http://jsfiddle.net/AJRw3/

如果没有指定选择器,on()也可以是click()的同义词:

代码语言:javascript
复制
$('.elementClass').click(function() { // code 
});

是同义词

代码语言:javascript
复制
$('.elementClass').on('click', function() { // code
});

从这个意义上说,它只向具有elementClass类的所有元素添加一次处理程序。如果你有一个新的elementClass,比如$('<div class="elementClass" />'),处理程序将不会绑定到这个新元素上,你需要做的是:

代码语言:javascript
复制
$('#container').on('click', '.elementClass', function() { // code
});

假设#container.elementClass的祖先

票数 153
EN

Stack Overflow用户

发布于 2012-04-10 10:08:27

有很多答案,每个都涉及几个要点-希望这能给你答案,并很好地解释什么是什么以及如何使用它。

使用click()bind('click' ...)的别名。使用bind()获取设置事件侦听器时的DOM,并将函数绑定到DOM中的每个匹配元素。也就是说,如果您使用$('a').click(...),您将把函数绑定到代码运行时发现的DOM中每个锚标记的单击事件。

使用live()是jQuery中的老方法;它用于绑定事件,就像bind()一样,但它不仅在代码运行时将事件绑定到DOM中的元素-它还侦听DOM中的更改,并将事件绑定到任何未来匹配的元素。如果您正在进行DOM操作,并且需要在某些元素上存在事件,而这些元素稍后可能会被移除/更新/添加到DOM中,但在第一次加载DOM时不存在,则这是很有用的。

live()现在被贬低的原因是因为它的实现很糟糕。为了使用live(),您必须首先(我相信)能够在DOM中选择至少一个元素。它还导致函数的一个副本被绑定到每个元素上--如果你有1000个元素,那么就会有很多复制的函数。

on()函数的创建就是为了克服这些问题。它允许您将单个事件侦听器绑定到不会在DOM中更改的对象(因此您不能对稍后将被移除/添加到DOM的元素使用on() -将其绑定到父对象),并且只需应用一个元素"filter“,以便该函数仅在冒泡到与选择器匹配的元素时才会运行。这意味着您只有一个绑定到单个元素的函数(而不是一堆副本)-在DOM中添加“实时”事件的一种更好的方法。

..。这就是不同之处所在,为什么每个函数都存在,为什么live()会折旧。

票数 40
EN

Stack Overflow用户

发布于 2012-04-10 09:42:58

click()on()的非委托方法的快捷方式。所以:

代码语言:javascript
复制
$(".close-box").click() === $(".close-box").on('click')

使用on()委托事件,即。在动态创建的对象中,可以执行以下操作:

代码语言:javascript
复制
$(document).on('click', '.close-box') // Same as $('.close-box').live()

但是,on()在任何静态元素中都引入了委托,而不仅仅是像live()那样的document,所以:

代码语言:javascript
复制
$("#closestStaticElement").on('click', '.close-box')
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10082031

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档