jQuery中的on方法

最新推荐文章于 2021-08-18 11:10:24 发布

转载最新推荐文章于 2021-08-18 11:10:24 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/feanlau/blog/910243

文章标签：

#javascript #python #ViewUI

本文介绍了在jQuery 1.7+版本中如何使用on方法来替代已移除的live方法，实现事件绑定，特别是针对动态添加的DOM元素。通过具体示例展示了on方法的语法结构及其参数的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

在jQuery的1.7+的版本之中，原来的live方法被去除了，那么怎么做到live方法的一样的绑定时间的效果呢？答案就是on方法，on 方法有怎么去使用呢？

on 给已经在dom 中的元素绑定事件

jQuery的文档里面已经给出示例了,先看看on方法的完整的形态：

on(events,[selector],[data],fn)
参数：events,[selector],[data],fn)*
events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它> 到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

在jQuery的文档中的示例：

function myHandler(event) {
    alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

这个示例基本可以说明on方法的使用，但是示例并没有涉及到第二个参数selector,而第二个有一个非常好用的特点就是这里第二点 给动态添加的元素绑定事件。

on 给动态添加的元素绑定事件

其实，on方法里面，第二个参数selector 才是真实作为触发事件的对象，在参数的解释中就有说明。
而jQuery在绑定事件的时候，$(selector1).on() 的时候，如果selector1 的元素还没有加载到dom中的时候，这段代码就会被忽略不执行，事件就不会绑定。这也就是说，如果我们省略on参数的selector的时候，时间是绑定要selector1上面。如果selector1的元素不存在，绑定事件就失败了。

也正是这样一个selector 参数，可是帮助我们实现为动态加载元素绑定事件。如上，我们知道真正触发事件的selector,事件绑定代码需要selector1存在，那就好办。我们找一个dom 中已经存在的元素，例如：document,我们要绑定的元素必然是这个的子元素，假如我们给 .testBtn （js动态加入的元素）绑定click事件，带入如下：

$(document).on('click','.testBtn',function(){
        console.log('button clicked ...');
})

这样就可以实现了。

转载于:https://my.oschina.net/feanlau/blog/910243