作者hermitwhite (不存在的騎士)
看板Ajax
標題[問題] 動態更新後jQuery抓不到DOM也不能delegate
時間Wed Jul 18 18:27:23 2012
我有兩個iframe，目前要把網頁都開在其中一個frame然後再把整個body
用來replace另一個iframe的body（目的是要做pre-load的功能）。這造成了
一些iframe內頁的code失效，應該是jQuery裡面DOM沒有跟著實際內容更新的
問題。我看到一些文章建議用delegate來bind event，不過在這個狀況中甚
至無法觸發。想請問這可能是什麼問題，以及如何解決。我目前的一個假定
是用來delegate event的主體如果本身是動態產生出來的可能就沒效果。
code還很亂，問題的部分大致如下：
jQuery(document).ready(function(){
jQuery("#test").click(function(){
alert(JSON.stringify(jQuery('a')));
...
})
})
在body整個被replace掉（#test是新產生出的，本來沒有）的網頁中，
上面這個會觸發，但alert告訴我裡面沒有一個a（其實很多）；它讀不
到該有的元件。
jQuery(document).ready(function(){
jQuery(document).delegate("#test", "click", function(){
alert(JSON.stringify(jQuery('a')));
...
})
})
在body整個被replace掉的網頁中，這個完全不觸發也沒錯誤訊息。
兩者直接開出來（不在iframe中）都可以正確執行。請教板友以上問題。
--
Il Cavaliere Inesistente
http://dejavu.blogdns.org/
騎士是種一旦失去存在的意義，就會崩解消失的東西
因此他們的一生總在追求著某些事物，以維持自己的存在
如果有了存在的理由，即使是一副空的鎧甲，也可以成為騎士
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.253.79.103
1F：→ SanChungAndy:問題應該在你replace 那一段 07/19 00:35
我replace的部分是寫在頂層的網頁中，當iframe2（每次實際開啟網頁的
地方）裡面document.ready時會呼叫這個top的函式，這部分構造如下：
$('#frame1').contents().find('body').replaceWith($('#frame2').contents()
.find('body'));
參考板友來信的建議，我試了以下兩種修改，還是不能執行，但是狀況有一點
差異：
$('#frame1').contents().find('body').html('').append($('#frame2').contents()
.find('#wrapout'));
改成用這行來做iframe內容的變更，狀況沒有改變，click可以觸發但抓不到DOM，
delegate則不觸發（#wrapout是body內最外層的tag）。
$('#frame1').contents().find('body').html('').append($('#frame2').contents()
.find('body').html());
改成用這行來做的話，連click也變成和delegate的狀況一樣完全不觸發。
這個出問題的按鈕包在很裡面，要分離出來append可能需要一點時間...我是比
較希望用能整頁一起處理的方式去replace（不然將來增加內容會很麻煩）。此外我
剛剛還做了一個實驗，把.click的內容都拉出來丟進一個獨立function clicks()然
後設定$("#test").attr('onclick', 'clicks()')，也就是試著讓它在按鈕時才呼
叫該讀取的內容。不幸這個方法有瀏覽器差異性，在IE中可以照一開始預期的發動
onclick，但在chrome中不觸發。我打算繼續做其他實驗...。
※ 編輯: hermitwhite 來自: 111.246.26.243 (07/19 15:14)
2F：→ SanChungAndy:如果不用複製preload的dom改用$("body").load 載入呢 07/20 01:33
3F：→ hermitwhite:不能用load呢，因為我一方面想解決SEO問題和瀏覽器前 07/21 18:14
4F：→ hermitwhite:進後退問題才特別用了iframe。 07/21 18:15
我後來發現不只是replace到不同iframe，只是從iframe裡把code replace到外
面也會有一樣的問題。此外還有一些神秘的現象例如某些本來不能跑的code只要在
下一行加上alert(object)結果竟然就能跑了。我對於jQuery裡面呼叫物件或連結的
方式還沒有很清楚的概念所以也不太有辦法去處理。目前我迴避這些問題的方法基
本上是盡量把event寫進html裡（onclick='clicks("eventName")'之類；不能在
javascript裡面用.attr去加，有些瀏覽器這樣搬移後還是出問題），然後在被搬移
進的頁面裡再用script把clicks()重新指向到原始的iframe裡面對應的function。
目前看來這麼做沒有問題。
※ 編輯: hermitwhite 來自: 114.26.165.44 (07/26 14:14)