js/jq 动态添加的元素不能触发绑定事件解决方案
来源:互联网 发布:插画制作软件 编辑:程序博客网 时间:2024/06/01 08:30
<!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版本以下都不支持on委托事件 jquery1.3 至 jQuery1.8版都支持live委托事件 jquery1.9 以后的版本不支持live委托事件,但是on事件可以替代live -->
jquery1.3版本以下的(不包括jquery1.3),是时候更新你的jquery版本了。因为 无解无解无解无解无解无解
如果jquery版本是在1.3-1.8之间的话,js/jq动态添加的元素触发绑定事件的解决方法(不建议用on事件,因为1.6版本以下不支持on事件,会报错)
click例子$('element').live('click',function(){})element可以是动态生成的元素,可以是它的类或者id
如果jquery版本是在1.9或者更高的话,live委托事件是被移除的,通过on来实现。js/jq动态添加的元素触发绑定事件的解决方法
注意注意:如果页面同时存在低版本的jq(1.3-1.8)和高版本jq(jquery1.9以上)的话,live委托事件会被高版本移除,最后导致虽然有jquery版本是在1.3-1.8之间,使用了live事件,页面会报错。
click例子$('父元素').on('click', '子元素', function(){})
此时动态加载出来的元素一定要在$(‘父元素’)里面,否则绑定事件失效。换句话说,本应该绑定A元素,但是A元素是动态生成的,所以jq应该获取A元素的父元素来监听A元素是否发生click事件。
举个例子
<!DOCTYPE html><html><head> <title>js/jq 动态添加的元素不能触发绑定事件解决方案</title></head><script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script><body><button>添加a标签</button><div class="a-Box"> <a href="javascript:;" class="alt">My name is</a><br></div></body></html><script type="text/javascript"> $('.a-Box').on('click', 'a', function(){ alert('Jachin'); }) $('button').click(function(){ $('div').append('<a href="javascript:;" class="alt">My name is</a><br>'); })</script>
这样就可以完美解决动态加载出来的元素无法被监听。
最后附上个版本的jquery
<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/1.3.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/1.5.1/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/1.6.1/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script><script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script><script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
阅读全文
1 0
- js/jq 动态添加的元素不能触发绑定事件解决方案
- jquery动态添加元素无法触发绑定事件的解决方案
- jquery动态添加元素无法触发绑定的事件的解决方案。
- jquery动态添加元素无法触发绑定的事件的解决方案
- 关于动态添加的元素不能触发click事件
- JS----动态添加元素绑定事件
- js 向动态添加的元素绑定事件。
- jq 为新添加的元素绑定事件
- Jq关于动态创建元素事件的绑定
- jQuery动态添加的元素绑定事件
- 给动态添加的元素绑定事件
- 绑定事件 动态添加的元素 失败
- js动态生成的元素绑定事件
- js动态添加的元素,动作绑定
- jq动态生成的元素(标签)添加点击事件
- jquery on() 给js动态新添加的元素 绑定的点击事件。
- 页面元素用JS动态添加的有效事件绑定方式(on)
- jq 动态绑定事件
- sql数据表操作
- git学习总结
- JAVA学习笔记14——Spring框架第一章
- VC++6.0 显示行号插件VC6LineNumberAddin.dll,破解版支持win7 64位系统
- java clone详解
- js/jq 动态添加的元素不能触发绑定事件解决方案
- 社会化分享+留言
- Raft集群讲解
- 关于小程序修改子页标题
- String to Integer (atoi)
- 【Android】自动化设计过程中需要adb命令的场景
- Web前端性能优化——如何有效提升静态文件的加载速度
- Mybatis 动态加载sql when otherwise choose 理解成if else 条件中可以把传来的参数当变量
- HTTP协议之post multipart/form-data数据类型实例