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