jQuery页面元素动态添加后绑定事件丢失方法,非 live


Posted in Javascript onJune 16, 2016

代码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的特性导致事件多次执行....完美!

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
JS返回顶部实例代码
Aug 09 Javascript
angular.js实现购物车功能
Oct 23 Javascript
js实现滑动进度条效果
Aug 21 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 #Javascript
jQuery的层级查找方式分析
Jun 16 #Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 #Javascript
JS中sort函数排序用法实例分析
Jun 16 #Javascript
JS原型对象的创建方法详解
Jun 16 #Javascript
JS使用单链表统计英语单词出现次数
Jun 16 #Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 #Javascript
You might like
PHP redis实现超迷你全文检索
2017/03/04 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
Python中IPYTHON入门实例
2015/05/11 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
银行实习自我鉴定
2013/10/12 职场文书
文秘人员工作职责
2014/01/31 职场文书
优秀护士获奖感言
2014/02/20 职场文书
婚礼主持词开场白
2014/03/13 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
营销经理工作检讨书
2014/11/03 职场文书
暖春观后感
2015/06/08 职场文书
毕业赠语大全
2015/06/23 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Mysql 一主多从的部署
2022/05/20 MySQL