jQuery on()绑定动态元素出现的问题小结


Posted in Javascript onFebruary 19, 2016

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等。

之前使用 on 的时候一直是

$("").on('click','function(){ 
}')

之后发现有些时候一直无法绑定(比如元素动态生成时),查看文档后发现正确用法应该是

$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
})

同时,注意

As this answers receives a lot of attention, here are two supplementary advises :

1) When it's possible, try to bind the event listener to the most precise element, to avoid useless event handling.

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

2) Be careful, when you add an element with an id, to ensure you're not adding it twice. Not only is it "illegal" in HTML to have two elements with the same id but it breaks a lot of things. For example a selector "#c" would retrieve only one element with this id.

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()

当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的换掉bind()

替换live()

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法

代码如下:

$('#list li').live('click', '#list li', function() {
//function code here.
});

on()写法

代码如下:

$(document).on('click', '#list li', function() {
//function code here.
});

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()

delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

代码如下:

$('#list').delegate('li', 'click', function() {
//function code here.
});

on()写法

代码如下:

$('#list').on('click', 'li', function() {
//function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

jquery on() 方法绑定动态元素

废话不多说了,直接给大家贴代码了。

<div id="test">
<div class="evt">evt1</div>
</div>

错误的用法,下面方法只为第一个class 为 evt 的div 绑定了click事件,使用append动态创建的div则没有绑定

<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

正确的用法如下:

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>
Javascript 相关文章推荐
Javascript学习笔记4 Eval函数
Jan 11 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
vue cli 全面解析
Feb 28 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
学习javascript文件加载优化
Feb 19 #Javascript
初识angular框架后的所思所想
Feb 19 #Javascript
复杂的javascript窗口分帧解析
Feb 19 #Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 #Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 #Javascript
谈一谈javascript中继承的多种方式
Feb 19 #Javascript
多种js图片预加载实现方式分享
Feb 19 #Javascript
You might like
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
jQuery.extend 函数详解
2012/02/03 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
ionic3 懒加载
2017/08/16 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python读取中文txt文本的方法
2018/04/12 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
python实现杨氏矩阵查找
2019/03/02 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
酒店七夕情人节活动策划方案
2014/08/24 职场文书
单位考核聘任报告
2015/03/02 职场文书
公司聚餐通知
2015/04/22 职场文书
人民调解协议书
2016/03/21 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Python保存并浏览用户的历史记录
2022/04/29 Python