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 HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
浅谈js闭包理解
Mar 28 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
全面解析JavaScript Module模式
Jul 24 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
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python实现随机生成任意数量车牌号
2020/01/21 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
给交警的表扬信
2014/01/12 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
毕业实习计划书
2015/01/16 职场文书
简历自我评价优缺点
2015/03/11 职场文书
党员证明模板
2015/06/19 职场文书
学习经验交流会总结
2015/11/02 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Nginx配置之禁止指定IP访问
2022/05/02 Servers