背景描述:
在一个主页面中有一个<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 οnclick="deleteRow()"......../>
结束语
不知道我理解的是否正确,请大虾指正。更希望大虾们能分享自己的想法。