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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
Javascript玩转继承(一)
May 08 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
关于JavaScript轮播图的实现
Nov 20 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
APMServ使用说明
2006/10/23 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
python设置表格边框的具体方法
2020/07/17 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
精神病医院见习报告
2014/11/03 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
七年级作文之冬景
2019/11/07 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
vue自定义右键菜单之全局实现
2022/04/09 Vue.js