jquery live方法,解决jquery动态添加按钮无法触发点击事件的问题
来源:互联网 发布:软件license管理器 编辑:程序博客网 时间:2024/05/19 16:50
在学习jquery过程中,做过这样一个小应用,即动态添加信息到表格中,表格最后有一个删除按钮,结果用jquery添加的按钮点击并不能触发在jquery中定义好的click事件。通过多种方法的尝试,发现jquery中的live()方法能解决这个问题。
先展示一下API文档中对live()的概述:
jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说
<body> <div class="clickme">Click here</div></body>
可以给这个元素绑定一个简单的click事件:
$('.clickme').bind('click', function() { alert("Bound handler called.");});
当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。
$('body').append('<div class="clickme">Another target</div>');
尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。
.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:
$('.clickme').live('click', function() { alert("Live handler called."); });
然后再添加一个新元素:
$('body').append('<div class="clickme">Another target</div>');
然后再点击新增的元素,他依然能够触发事件处理函数。
live()就能解决最初遇到的问题,代码可以用下面的方式写:
$("input[value=删除]").live("click",function(){$(this).parent().parent().remove();})
这样写,不管是原来页面上有的“删除”按钮,还是后面动态添加上的“删除”按钮,都可以触发click事件。
阅读全文
0 0
- jquery live方法,解决jquery动态添加按钮无法触发点击事件的问题
- jquery动态添加元素无法触发绑定事件的解决方案
- jquery动态新增的元素无法触发事件问题的解决办法方法
- 关于jquery无法为动态生成的dom元素添加点击事件的问题
- 解决Android按住空白区域,导致点击其他按钮无法触发点击事件的问题
- jquery 回车触发按钮点击事件
- jQuery向动态生成的内容添加事件响应(jquery live方法简介)
- jQuery向动态生成的内容添加事件响应(jquery live方法简介)
- jquery动态添加元素无法触发绑定的事件的解决方案。
- jquery动态添加元素无法触发绑定的事件的解决方案
- jquery触发点击事件
- jQuery实现长按按钮触发事件的方法
- jQuery实现长按按钮触发事件的方法
- 按钮无法触发点击事件
- jquery无法为动态生成的元素添加点击事件的解决方法
- JQuery触发事件的方法
- jQuery.on() 函数详解--解决动态加载的标签无法绑定点击事件
- Jquery控制点击事件的触发顺序
- ConvertView和ViewHolder的个人理解
- Hadoop Streaming框架学习(一)
- Oracle 安装 与 卸载 以及 使用 plsqldev
- ionic中实现从相册中选择图片并一次上传多张图片
- Hadoop Streaming框架学习(二)
- jquery live方法,解决jquery动态添加按钮无法触发点击事件的问题
- 使用新浪云SAE建立一个公网可访问的网页应用
- 第十一章 img特征 vertical-align cursor opactiy
- Codeforces Round #364 (Div. 2) F. Break Up(割边)
- 谁考了第k名
- 逻辑回归模型(Logistic Regression, LR)基础
- 双系统/虚拟机安装实践记录
- JZOJ 5398. 【NOIP2017提高A组模拟10.7】Adore
- 20171007离线赛总结