javascript - 如何用JQuery给新加载的元素添加点击事件,而不影响其他元素
天蓬老师
天蓬老师 2017-04-10 15:53:35
[JavaScript讨论组]

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

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(4)
迷茫

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

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

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

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

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

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

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

手机码字不宜。

阿神

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

迷茫

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

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

第二种:新增加的标签属性直接添加事件,例如<p id='新加载' onclick="点击事件()"></p>。

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

迷茫

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

举个栗子

var d=$("<p></p>");
d.click(function(){});
$("body").append(d);
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号