作者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