jQuery中的live给我带来的烦恼

背景描述：
      在一个主页面中有一个<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 楼 wdxiake 2012-07-04  

楼上正解。

1 楼 千道5 2012-05-30  

今天也是遇到你这样的问题。 我右边DIV也是load。

多次实践，后来搞好啦。

最重要的是在jquery load()右边页面之前，使用die()把之前委托清除。

				$(".addRow_ok_save").die();
				$("#pageObject").load("elements.php",{pageId: this_pageId,pageName: this_pageName});