文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

jQuery中用on绑定事件时需注意哪些问题

2024-04-02 19:55

关注

本篇内容介绍了“jQuery中用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(),故不另作举例。

“jQuery中用on绑定事件时需注意哪些问题”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯