jQuery 动态添加的元素的绑定问题

2015-12-05 11:41:43 +08:00
 cevincheung
$('#xx').find('a[data-id]').on('click','a',function(){
    console.log('click');
});

页面上的内容本身是存在的,点击后 ajax 请求的数据再动态的添加到页面中,但是onselector却怎么设置都不生效……

2026 次点击
所在节点    JavaScript
12 条回复
7anshuai
2015-12-05 11:46:06 +08:00
.on() 中的第二个参数 'a', 去掉试试
moe3000
2015-12-05 11:51:22 +08:00
你的 a[data-id] 就是你要绑定的 a 么?
cevincheung
2015-12-05 12:17:01 +08:00
@moe3000 就是要绑定后面用 JS 动态生成的元素才加的。但是貌似加不对……
cevincheung
2015-12-05 12:17:08 +08:00
@7anshuai 这个要的
moe3000
2015-12-05 12:19:39 +08:00
你这个写的我看不懂, on 里面的 selector 是之前的对象里的元素筛选,按你这么写就变成了对 a[data-id]里的 a 进行 click 绑定了
xujif
2015-12-05 12:20:02 +08:00
$('#xx').on('click','a[data-id]',function(){
console.log('click');
});
我才 data-id 的 a 是后生成的
LancerComet
2015-12-05 12:26:33 +08:00
To 楼主,以下两种方式的区别?
$("#xx").find("a").on("click", function () {});
$("#xx").on("click", "a", function () {});
cevincheung
2015-12-05 12:44:17 +08:00
@LancerComet
@xujif

$("#xx") 是不固定的,所以是一个 jq 的对象。这样的 var obj = $('#xx') 。
然后传入到一个函数里,函数里只能使用 obj 了。所以实际上是这样的 obj.find('a[data-id]').on('click','selector')
XiaoxiaoPu
2015-12-05 12:54:22 +08:00
xujif
2015-12-05 12:58:13 +08:00
@cevincheung 那这个就不能做到动态绑定,要把事件绑定到不改变的元素上去,比如 body document
dong3580
2015-12-05 13:18:14 +08:00
on 或者将 js 方法加在生成的元素之后,
shuiniushushu
2015-12-06 13:08:30 +08:00
你可以用事件委托,这样的话就不用动态绑定事件了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/241317

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX