jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016-06-16 14:16
1181 查看
代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失
<input type="button" value="Add" name="test_but" /> <div id="test_div"><input name="test_input"/></div> <script> $('input[name=test_input]').change(function(){ alert($(this).val()) ; }); $('input[name=test_but]').click(function(){ $('input[name=test_input]').clone().appendTo($('#test_div')); }); </script>
代码2: 以jquery的live方法绑定change事件,alert不会丢失,但是在点击add时有可能多次添加input,或者多次弹出提醒框,刷新页面后就好了,但是多次操作后还是会这样
<input type="button" value="Add" name="test_but" /> <div id="test_div"><input name="test_input" onchange="alert_val(this)"/></div> <script> $('input[name=test_input]').live('change',function(){ alert($(this).val()) ; }); $('input[name=test_but]').click(function(){ $('input[name=test_input]').clone().appendTo($('#test_div')); }); </script>
代码3: 解决之道....
<input type="button" value="Add" name="test_but" /> <div id="test_div"><input name="test_input" onchange="alert_val(this)"/></div> <script> function alert_val(obj){ alert($(obj).val()); } $('input[name=test_but]').click(function(){ $('input[name=test_input]').clone().appendTo($('#test_div')); }); </script>
通过js原生态的onchange事件,把对象本身传递进去,这样既可以用到jquery语法继续写东西,也不会丢失绑定事件,更加不会因为live的特性导致事件多次执行....完美!
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码