如何给动态生成的元素绑定事件，而且又不会重复绑定多次！！【javascript吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：163,127贴子：
如何给动态生成的元素绑定事件，而且又不会重复绑定多次！！收藏
问题是这样的：我要实现上拉加载下拉刷新的效果，就在一个ul中动态的插入li,并在li里面的元素p绑定事件，可是如果在每次动态生成的时候绑定的话，那之前存在的元素会被绑定多次，一触发就会响应多次，这样该怎样处理，让新元素和以前就存在的元素都只绑定一次！/*这个是ajax成功后的回调函数*/function success(data){
var obj=data.data.
for(var i=0;i&obj.i++){
var str='&li&&div class=&lsdivl&&'+
'&div class=&img&&'+
'&img src=&'+obj[i].tx+'& alt=&&/&&/div&&p class=&usn&&'+obj[i].xm+'&/p&&/div&&div class=&lsdivr&&'+
'&p class=&tit& &&span class=&'+sd+'&&锁&/span&&span class=&'+ts+'&&推&/span&&span class=&'+zd+'&&顶&/span&&a data-tzid=&'+obj[i].tzid+'& href=&tiezizhengwen-pinglun.html?tzid='+obj[i].tzid+'&dwbkid='+obj[i].dwbkid+'&mc='+obj[i].dwbkmc+'&ryid='+obj[i].ryid+'&&&span&'+obj[i].dwbkmc+'&/span&&br/&'+obj[i].bt+'&/a&&/p&'+
'&p class=&con&&'+obj[i].zy+'&/p&'+
'&p class=&clc cf& data_i=&'+obj[i].tzid+'|'+obj[i].dwbkid+'&&'+
'&span&&a href=&#& data-tz=&&&'+obj[i].hfs+'&/a&&/span&'+
'&span&&a href=&#& class=&'+shc+'& data-tz=&sc&&'+obj[i].scs+'&/a&&/span&'+
'&span&&a href=&#& class=&'+guz+'& data-tz=&gz&&'+obj[i].gzs+'&/a&&/span&'+
'&span&&a href=&#& class=&'+daz+'& data-sfdz=&'+obj[i].sfdz+'& data-tz=&dz&&'+obj[i].dzs+'&/a&&/span&&/p&'+
'&p class=&tim&&'+obj[i].zjgx+'&/p&&/div& &/li&';
if(lx=='xl'){
$('ul.lsmod-ul').prepend(str);
}else if(lx=='sl'){
$('ul.lsmod-ul').append(str);
}/*这里给动态生成的元素绑定事件，会造成元素被多次绑定，该怎么解决？？*/
$('.clc span:gt(0) a').on('touchend',function(e){
var sta=$(this).attr('data-tz');
stopEvent(e);
var str=$(this).parent().parent().attr('data_i');
var arr=str.split('|');
var data={
&tzid&:arr[0],
&dwbkid&:arr[1]
dsg(data,sta,this);
千锋javascript,名企内部推荐就业,入学签订就业协议,2周免费试学!千锋javascript,20周快速成为高级开发工程师,就业“薪”踏板!
绑定前先删除之前的绑定再重新绑定啊
登录百度帐号jqueryhtml动态添加元素绑定事件
由于实际的需要，有时需要往网页中动态的插入HTML内容，并在插入的节点中绑定事件处理函数。我们知道，用script向HTML文档中 插入内容，有两种方法，
一种是在写HTML代码写入JS，然后插入到文档中；
另外一种是通过ajax的方式，从服务器获取数据，然后用js把获取的数据经 过处理后插入文档中；
两种方法各有特点，本文将分析新插入到文档中的元素的事件绑定问题，并假定新插入的对象不做内联的事件绑定（即不用类似
，第一次加载只会显示固定条数的评 论，如果评论超过一定数量，剩下的会用ajax的方式进行加载。所有的留言最后都有个回复功能，点击可以恢复相应的留言，也就是说，动态加载上来的留言， 也许要绑定click事件，并注册上回复留言的函数。当然偷懒的方法是，为ajax加载上来的内容再注册一个click并再绑定一次相应的函数，但这加大 了代码的冗余度，增加系统开销，还会使代码变得难以理解。那么更好的解决办法是什么呢？Jquery对动态生成的元素绑定事件
查询 Jquery api中的 .live()事件；
很多时候我们对一个对象绑定一个事件的时候老是发现绑定不成功，这时你可以查查看这个对像是不是你通过Jquery动态生成的。
jQuery的html()可以给现在元素附加新的元素，innerHTML也可以，那么，如何给这些新生成的元素绑定事件呢？直接在元素还未生成前就绑定肯定是无效的，因为所绑定的元素目前根本不存在。
然而，jQuery为我们提供了一个函数来解决这个问题，它就是.live(),它可以给所有元素绑定事件，不论是已有的，还是将来生成的，比如：
$(‘#div’).live(‘click’,function(){
//do stuff
它还可以同时绑定多个事件：
$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
// do something on mouseout
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。博客访问： 254525
博文数量： 185
博客积分： 0
博客等级： 民兵
技术积分： 1755
注册时间：
分类： jQuery 14:27:04
今天遇到个问题，在table里面动态更新数据，然后每一行会绑定相应的点击事件
我原本是想用 可作用于未来元素的on方法，但是实际上还是没有起作用，代码如下：
$(".form-table tbody tr").on("click",function () {}）
这段代码在页面加载时的表格中是起作用的，但是当ajax动态更新表格数据之后就不起作用了，原因是jq读到这段代码时，浏览器还没更新html代码呢所以找不到，也触发不了点击事件。
解决方法：
$("body").on("click",".form-table tbody tr",function () {}）
具体参数信息：
on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
有人提出了事件委托，那么对于这种动态添加的事件，我建议这么写：
function $domOfSth(text){
&&&&&&&&return $("").on('click','.tags_closebtn',function(){
&&&&&&&&&&&&console.log('xxxx');
&&&&&&&&});
&&&&$('#xxx').append($domOfSth('xxx'))
这样的优势在于：
在$domOfSth函数里面，这个dom可以绑定事件的写法相当灵活
对于事件一目了然，可维护性好
事件绝对牢牢绑定在插入dom上，不会因为js读到$(".tags_closebtn")这一句的时候，页面找不到这个对象的尴尬。。。&
这个尴尬刚好是你点击事件未绑定到插入的dom上的原因。因为，js读到$(".tags_closebtn").on('click')的时候，浏览器还没更新html代码呢，然后jq就跑去找，发现tm页面上根本没有这个类，是假的，是化学的成分。。。
阅读(260) | 评论(0) | 转发(0) |
给主人留下些什么吧！~~
请登录后评论。用原生 js 如何获取到动态添加的元素，并绑定事件
04:14:00 +08:00用 Android 发布 · 4038 次点击
10 回复 &| &直到
23:30:47 +08:00
& & 04:57:52 +08:00
你的意思是像用jquery一样么？那就用querySelector/querySelectorAll获取然后用addEventListener就好了啊当然 老IE 的话就要用其他办法了不然jquery就没有存在的意义了 除了API方便一些
& & 05:16:40 +08:00
1楼不要误导别人。请搜索: javascript delegate
& & 05:42:47 +08:00
问的应该是事件委托.硬要实现这个功能 DOM3 有 DOM 修改事件.
& & 08:36:48 +08:00
LZ没说这些要移除啊动态添加或者移除 那么就是用Delegation实现的话 其实就是绑定父元素的event然后通过e.target进行判断 可以用el.matches/matchesSelector
& & 08:41:15 +08:00 via Android
事件委托on其实就是事件的冒泡一点击事件在dom节点冒啊冒，你在ducument 上面捕获它，处理。$(document).on('click','#header',func);这个header就不用管是现在还是未来的元素，因为事件是绑定在document上面
& & 08:43:54 +08:00 via Android
考点是闭包
& & 14:16:58 +08:00
用 MutationObserver。
& & 14:19:51 +08:00
嗯，就是MutationObserver这个库大概就能满足lz要求了不依赖jq
& & 10:42:14 +08:00 via Android
楼上都在说啥-_-||利用事件冒泡，把事件绑定在 document 上，在回调函数里判断事件的 target 就行了。各位就别逗楼主了
& & 23:30:47 +08:00
九楼正解。
& · & 2629 人在线 & 最高记录 3762 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.1 · 17ms · UTC 04:39 · PVG 12:39 · LAX 21:39 · JFK 00:39? Do have faith in what you're doing.