当前位置: 代码迷 >> Web前端 >> jQuery中的live给小弟我带来的烦恼
  详细解决方案

jQuery中的live给小弟我带来的烦恼

热度:238   发布时间:2012-11-22 00:16:41.0
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()"......../>

?

结束语

????? 不知道我理解的是否正确,请大虾指正。更希望大虾们能分享自己的想法。

1 楼 千道5 2012-05-30  
今天也是遇到你这样的问题。 我右边DIV也是load。

多次实践,后来搞好啦。

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

				$(".addRow_ok_save").die();
				$("#pageObject").load("elements.php",{pageId: this_pageId,pageName: this_pageName});
2 楼 wdxiake 2012-07-04  
楼上正解。
  相关解决方案