PTT數位生活區 / Ajax

Re: [問題] click事件,on的使用問題

看板Ajax作者 (釣到一隻猴子@_@)時間12年前 (2013/10/04 19:00), 編輯推噓4(4推 0噓 14→)
留言18則, 4人參與, 最新討論串2/2 (看更多)
※ 引述《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)
推
10/04 19:07, , 1F
感謝指點 看來我還是得再多看一些文件才行...
10/04 19:07, 1F
→
10/04 19:17, , 2F
用.click()不會套用到之後動態新增的物件上
10/04 19:17, 2F
→
10/04 19:17, , 3F
所以原po才會用.on()...雖然還是用錯
10/04 19:17, 3F
推
10/04 19:22, , 4F
嗯... 可以請樓上指點一下我的錯誤嗎?
10/04 19:22, 4F
→
10/04 19:23, , 5F
然後 如果照樓主所說的 改成
10/04 19:23, 5F
→
10/04 19:23, , 6F
$(".newItem").click(function(event){
10/04 19:23, 6F
→
10/04 19:23, , 7F
var SideItem = $(event.currentTarget);
10/04 19:23, 7F
→
10/04 19:23, , 8F
SideItem.addClass('active');
10/04 19:23, 8F
→
10/04 19:24, , 9F
不管on還是click對新增的都無用
10/04 19:24, 9F
→
10/04 19:24, , 10F
on能夠有類似的結果是要靠額外的selector去做filter
10/04 19:24, 10F
→
10/04 19:24, , 11F
}); 這樣反而是沒有反應的耶?
10/04 19:24, 11F
→
10/04 19:25, , 12F
但那就不是bind在li上面 而是他的父DOM
10/04 19:25, 12F
→
10/04 19:25, , 13F
(雖然原PO綁在document上就是...)
10/04 19:25, 13F
→
10/04 19:26, , 14F
先確定一下你on是在li生成前還後
10/04 19:26, 14F
→
10/04 19:26, , 15F
如果要在生成後還能用的話
10/04 19:26, 15F
→
10/04 19:27, , 16F
$('#content').on("click", "li", function(event){
10/04 19:27, 16F
順便解釋一下 這行就是對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)
推
10/04 19:35, , 17F
喔喔 我明白了 感謝指導~
10/04 19:35, 17F
※ 編輯: danny8376 來自: 140.115.216.102 (10/04 19:39)
推
10/04 21:36, , 18F
click 跟 on 用法有差哦
10/04 21:36, 18F
‣ 更多 danny8376 的文章
文章代碼(AID): #1IJf_FVJ (Ajax)
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 2 之 2 篇)：
排序： 最新先 | 最舊先 | 留言數
在新視窗開啟完整討論串 (共2篇)
Ajax 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 danny8376 的文章
文章代碼(AID): #1IJf_FVJ (Ajax)