背景描述:
在一个主页面中有一个<div id="myDiv"/>,还有一个加载页面按钮load,点击时通过ajax的方式加载一个table.jsp页面,在table.jsp页面中有一个表格table,一个按钮addRow(图片按钮,点击表格添加一行),在每一行的后面有一个删除按钮delete(图片按钮,点击删除该行)。
我的做法:
由于delete按钮是动态加入的。所以我用了jquery的live方法,在table.jsp页面中为这些delete按钮添加了click事件,代码如下:
$(
$("img[name^='delete']").live("click",function(){alert("delete");//do something});
)
我的烦恼:
当多次点击load按钮时,假设5次,那么在点击delete按钮删除一行时,alert会弹出5次,即在delete上利用live注册的click事件执行了5次。老天啊。这是为啥,赶紧看看live的原理。
我的理解:
在jQuery的API上有这样一段话:.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
所以说点击load按钮多次,加载table.jsp页面多次,也就意味着在DOM树的根节点上绑定了多个相同的响应方法,点击delete按钮时,这些多次绑定的方法都会响应。
我的解决办法:
无奈我只有用笨方法解决了。在页面中去掉了原来的那段jQuery代码:
$(
$("img[name^='delete']").live("click",function(){alert("delete");//do something});
)
新增JavaScript函数:
function deleteRow(){
alert("delete");
//do something
}
并在delete图片按钮上添加onclick事件:
<img onclick="deleteRow()"......../>
结束语
不知道我理解的是否正确,请大虾指正。更希望大虾们能分享自己的想法。
- 大小: 2 KB
分享到:
相关推荐
jQuery Live Form Validation是一个用于创建表单验证的jQuery插件。支持自定义校验规则,既可以在输入的时候实时校验,也可以在提交的时候校验。提示信息的样式完全可以通过CSS定义。
前端项目-jquery.liveurl,jQuery plugin to get an url preview like the facebook attachment
本压缩包内包含以下文件: jquery-1.12.4.js jquery-1.12.4.min.js jQuery1.11.0_20140330.chm jQueryAPI_CHM.CHM
jQuery是一个JavaScript框架,自面世以来,以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等功能使多很多WEB编程者对其非常热爱,本手册旨在帮助广大jQuery爱好者快速了解jquery库...
jQuery API 1.4.4 中文参考手册.chm,jquery api 下载,jQuery 1.4.4 API 参考文档中文版.rar,jQuery最新版CHM下载,jQuery中文参考手册,jQuery中文版1.4.4参考手册,jQuery 1.4.4 速查表,jQuery中文参考手册,jQuery中文...
Jquery dataTable API 中文文档 word版 好用实在
本文实例讲述了jquery中live()方法和bind()方法区别。分享给大家供大家参考,具体如下: live()不受加载时间顺序的影响,只要查找能够配对上就能够绑定对应的事件,而bind方法只有在第一次被加载的时候才绑定时间,...
主要介绍了jQuery实现动态给table赋值的方法,结合具体实例形式分析了jQuery动态操作table表格节点的相关技巧,需要的朋友可以参考下
jQuery中文参考手册
本文给大家带来jQuery UI参考手册,需要的朋友们可以下载看看jQuery UI 特性简单易用继承 jQuery 简易使用特性,提供高度抽象接口,短期改善 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
jquery1.8.0 和jquery 1.8 中文 api
jQuery:bind() delegate() live()事件绑定
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
)制作的,但长期没有更新,给大家学习jQuery带来不便。为方便自己也为方便所有爱好jQuery的朋友,本人将CHM重新整理,并和jQuery中文API的整理者 Shawphy 同步更新本CHM手册,以便大家能及时了解其最新资讯!由于...
)制作的,但长期没有更新,给大家学习jQuery带来不便。为方便自己也为方便所有爱好jQuery的朋友,本人将CHM重新整理,并和jQuery中文API的整理者 Shawphy 同步更新本CHM手册,以便大家能及时了解其最新资讯!由于...
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解共8页.pdf.zip
这个资源 可以使你全面的掌握 JQuery,里面有我告诉你如何学习Jquery如何使用Jquery,里面还有Jquery的例子,还有Jquery的拓展UI,很好很强大的!!!这绝对是我精心压缩的一个资源,如果没学会,可以给我留言,然后...
jquery.livequery.js是jquery中的动态绑定事件所需的plugins
jquery jquery下载jquery下载jquery下载
jQuery最新中文文档,最实用,最靠谱