jQuery中用on绑定事件时需注意的事项


Posted in Javascript onMarch 19, 2017

随着jQuery版本的更新,以前版本的Bind(),live(),delegate()事件可以直接被on代替,本次笔记仅以点击事件为例,主要考察了on事件的用法:

一、用on监听点击事件前添加的DOM,可以正常触发:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 var oDiv = $('<div id="test">点我</div>');
 $(document.body).append(oDiv);
 $("#test").on('click', function(){
 alert('这是事件前添加的DOM,可以正常触发点击事件');
 });
 } );
</script>
</head>
<body>
 <div id="wrap"></div>
</body>
</html>

二、用on监听点击事件后添加的DOM,无法正常触发:

<!-- 一、正常的DOM: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 $("#test").on('click', function(){
 alert('这是事件后添加的DOM,无法正常触发点击事件');
 });
 var oDiv = $('<div id="test">点我</div>');
 $(document.body).append(oDiv);
 } );
</script>
</head>
<body>
 <div id="wrap"></div>
</body>
</html>

三、解决办法:利用事件委托。需要注意的是:委托的对象必须是DOM中已经存在或者事件前动态添加,此时,用on监听后后可以正常触发事件,否则如:步骤四:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 var oWrap = $('<div id="wrap"></div>');
 $(document.body).append(oWrap);
 $("#wrap").on('click', $('#test'), function(){
 alert('委托对象在事件前添加,可以正常触发点击事件');
 });
 var oDiv = $('<div id="test">点我</div>');
 $("#wrap").append(oDiv);
 } );
</script>
</head>
<body>
</body>
</html>

四、委托对象在事件后添加,无法触发点击事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 $("#wrap").on('click', $('#test'), function(){
 alert('委托对象在事件后添加,无法正常触发点击事件');
 });
 var oWrap = $('<div id="wrap"></div>');
 $(document.body).append(oWrap);
 var oDiv = $('<div id="test">点我</div>');
 $("#wrap").append(oDiv);
 } );
</script>
</head>
<body>
</body>
</html>

五、说明:工作中,on事件比较常用的还是事件绑定和事件委托,至少我碰到的比较多,live事件on用法主要是前面的jQuery对象变成了document,如:$(document).on(),故不另作举例。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
layUI实现列表查询功能
Jul 27 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 #Javascript
JavaScript数据结构之链表的实现
Mar 19 #Javascript
用jQuery实现圆点图片轮播效果
Mar 19 #Javascript
Bootstrap 网格系统布局详解
Mar 19 #Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 #Javascript
JSONP基础知识详解
Mar 19 #Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 #Javascript
You might like
PHP个人网站架设连环讲(三)
2006/10/09 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
移动节点的jquery代码
2014/01/13 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
python远程登录代码
2008/04/29 Python
python提取内容关键词的方法
2015/03/16 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python的多态性实例分析
2015/07/07 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python pymongo模块用法示例
2018/03/31 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
Python列表与元组的异同详解
2019/07/02 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python入门教程之基本算术运算符
2020/11/13 Python
Linux如何为某个操作添加别名
2015/02/05 面试题
学生个人自我鉴定范文
2014/03/28 职场文书
验房委托书
2014/08/30 职场文书
简单的辞职信模板
2015/05/12 职场文书
关爱空巢老人感想
2015/08/11 职场文书
React如何创建组件
2021/06/27 Javascript