作者danny8376 (钓到一只猴子@_@)
标题Re: [问题] click事件,on的使用问题
时间Fri Oct 4 19:00:28 2013
※ 引述《flirmnave (焰离雨星)》之铭言：
: 我要在动态新增的物件上绑定 click 事件
: 一开始是使用 blind 但一直都没办法出现效果
: 搜寻过後 发现 动态新增的物件必须用 on 去绑定
: 下面这张是未新增的网页结构
: http://i.imgur.com/rULb63i.jpg
: 然後动态新增了10个 li
: http://i.imgur.com/QK4F0Ch.jpg
: 而 jQuery 写成这样
: var SideItemzed = $('#content li');
: $(SideItemzed).on("click",function(){
: var SideItem = $(event.currentTarget);
这event倒底哪里来的...
你下面会成功是因为有把参数传给event
这边event根本就不存在当然不成功...
还有SideItemzed本身已经是jQuery Object了
直接写SideItemzed.on(...)这样就行了 多一次selector只是浪费效能
另外如果是click事件的话
可以直接用SideItemzed.click(
function to bind)来绑事件
可以不用用on来绑(虽然实际上一样啦)
: SideItem.addClass('active');
: });
: 但发现他还是没有触发事件...
: 後来又把 jQuery 改成
: var SideItemzed = $('#content li');
: $(document).on("click", 'SideItemzed', function(){
: var SideItem = $(event.currentTarget);
: SideItem.addClass('active');
: });
这边更不解释了 程式码越来越没效率...
: 但还是没有动作
: 请问各位 我是哪个观念搞错了呢??
: =========================================
: 囧... 刚刚PO完不久 我就试出来了
: 说一下我的解决方法
: 因为我那新增的物件是从 json 那里接收资料的
: 所以我预先帮它加上 class = "newItem"
: 而跑出来的网页就会变成
: http://i.imgur.com/N4DWoGv.jpg
: 然後 jQuery 改成
: $(document).on('click', '.newItem', function(event){
: var SideItem = $(event.currentTarget);
: SideItem.addClass('active');
: });
这边不如用
$(".newItem").click(function(
event){
...
})
: 这样点选後就会有反应了
: http://i.imgur.com/cn2zkfO.jpg
: 供各位如果有遇到问题参考
: 或者有更好的方法
: 也请不吝指教
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 140.115.216.102
※ 编辑: danny8376 来自: 140.115.216.102 (10/04 19:02)
1F：推 flirmnave:感谢指点 看来我还是得再多看一些文件才行... 10/04 19:07
2F：→ CaptainH:用.click()不会套用到之後动态新增的物件上 10/04 19:17
3F：→ CaptainH:所以原po才会用.on()...虽然还是用错 10/04 19:17
4F：推 flirmnave:嗯... 可以请楼上指点一下我的错误吗? 10/04 19:22
5F：→ flirmnave:然後 如果照楼主所说的 改成 10/04 19:23
6F：→ flirmnave:$(".newItem").click(function(event){ 10/04 19:23
7F：→ flirmnave: var SideItem = $(event.currentTarget); 10/04 19:23
8F：→ flirmnave: SideItem.addClass('active'); 10/04 19:23
9F：→ danny8376:不管on还是click对新增的都无用 10/04 19:24
10F：→ danny8376:on能够有类似的结果是要靠额外的selector去做filter 10/04 19:24
11F：→ flirmnave:}); 这样反而是没有反应的耶? 10/04 19:24
12F：→ danny8376:但那就不是bind在li上面 而是他的父DOM 10/04 19:25
13F：→ danny8376:(虽然原PO绑在document上就是...) 10/04 19:25
14F：→ danny8376:先确定一下你on是在li生成前还後 10/04 19:26
15F：→ danny8376:如果要在生成後还能用的话 10/04 19:26
16F：→ danny8376:$('#content').on("click", "li", function(event){ 10/04 19:27
顺便解释一下
这行就是对id=content的DOM绑定click事件
然後告诉额外要求
只针对tag = li的DOM来触发click事件
结果就是#content底下所有不管啥时出现的li都会触发到
#content上的那个click
这样说好像不大对
应该说这click事件会因要求所以把事件继续传给li才去触发事件
触发的DOM仍然是li本身
※ 编辑: danny8376 来自: 140.115.216.102 (10/04 19:33)
17F：推 flirmnave:喔喔 我明白了 感谢指导~ 10/04 19:35
※ 编辑: danny8376 来自: 140.115.216.102 (10/04 19:39)
18F：推 qwer820404:click 跟 on 用法有差哦 10/04 21:36