jQuery中用on绑定事件时需注意的事项
程序员文章站
2022-04-26 17:44:55
随着jquery版本的更新,以前版本的bind(),live(),delegate()事件可以直接被on代替,本次笔记仅以点击事件为例,主要考察了on事件的用法:
一、用...
随着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(),故不另作举例。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: 菜鸟SEO从业者蜕变的故事
下一篇: 解烦聊闷的搞笑吐槽