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 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
vue-router单页面路由
Jun 17 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 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页面缓存方法小结
2015/01/10 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python松散正则表达式用法分析
2016/04/29 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python+logging+yaml实现日志分割
2019/07/22 Python
python range实例用法分享
2020/02/06 Python
Python netmiko模块的使用
2020/02/14 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
工作求职信
2014/07/04 职场文书
办理信用卡工作证明
2014/09/30 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
比赛主持人开场白
2015/05/29 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python