如何用JQuery给新加载的元素添加点击事件,而不影响其他元素

Question

我现在写的页面会动态加载一些元素,而这些元素都需要添加点击事件,但是如果每次新元素加载完我用类过滤器给这些元素添加点击事件,那么已经加载的元素又加了一次点击事件.

Answer 1

很简单啊，事件代理。这种方式是最优雅的。楼上有 hack 成分。

用楼上方式，你需要为页面上已存在元素的事件和动态添加元素的事件分别绑定一次。

而事件代理，只须一次。并且代码简洁。

 $('body').on('click', 'button', function(){
    //....
 })

这种把子元素（button）代理到父元素（body）的方式，可满足动态元素. 如上,动态添加的 button 也是有事件的。

因为事件是作用在 body 上的，只要你body元素不是动态的，其子元素再怎么动态都是可以绑定的。

当然，上面的 body 可以是任意你要动态添加的元素的父元素，但是这个父元素不能是动态添加的。

手机码字不宜。

Answer 2

简单粗暴的办法 能先remove掉事件，在绑定。
略作参考哦，http://www.cnblogs.com/heiniuhaha/archive/2011/08/07/jquery-event-repeat-bind.html
应该还有更加优雅的方式

Answer 3

当时的做法是这样的，或许可以帮到你。
比如
我要新加载一个div标签
直接为这个div加事件肯定行不通嘛~

解决方案：
第一种：将新加载的div标签放在我指定的标签内，例如<div id='外部'><div id='新加载'></div></div>
只要写id为外部的div点击事件或其他事件就好了。

第二种：新增加的标签属性直接添加事件，例如<div id='新加载' onclick="点击事件（）"></div>。

当然你说的是jquery实现，最后一种方案貌似不太符合你的预期，手机码字，就打这么多了。

Answer 4

动态添加的元素，添加到页面中之前，先生成jquery元素，然后想怎么绑怎么绑，最后再加到页面中

举个栗子

var d=$("<div></div>");
d.click(function(){});
$("body").append(d);