jquery - jquey tabs ajax load html 衝突問題？

Question

tabs load的html，裡面有js，也有html，id，都有可能衝突，如何解決？

（不用ifame哦，iframe每次加載明顯不如load，即便是緩存，也要初始化很多的，而且iframe內部帶的dialog要在iframe外顯示也很費勁，多個頁面有同樣的dialog也會出現這種問題）

Answer 1

有三種方案：

1. 用某種命名規範把 id 修改成互不衝突的形式。雖然這個解決方案看起來最不符合題主的要求，但是個人最推薦這麼做，會減少後期的不少麻煩。如果這些 html 邏輯上是在同一個介面上的，那麼它們就本該有不同的 id，要不以後寫邏輯和樣式的時候都會遇到麻煩。

2. 假設只是 tab 的 html 會有 id 衝突，同時顯示的 tab 只有一個，那麼可以考慮每次切 tab 的時候都把沒顯示的 tab 從 DOM 裡面 detach，當需要的時候再 append。

3. 使用 <iframe src="about:blank"></iframe> 来显示 html，通过设置 <iframe> 的 contentWindow.document.body.innerHTML 可以修改它的內容。如果還希望能很好的顯示 html 的外帶樣式和腳本，還有各種 dialog，也可以有各種 hack 的方法，但總歸是個 hack，後患無窮。

P.S. 應題主要求，補充一些 hack 的思路。

1. 如何讓 jQuery UI 的 dialog 預設插入到指定的地方？

可以透過下面程式碼覆蓋 dialog 的預設選項，其中關鍵的是 appendTo 這個選項。

$.extend($.ui.dialog.prototype.options, {
    appendTo: tabNode
});

每次載入 tab 前、切換 tab 後的時候都把這個選項設定一下，設定成目前顯示的這個 tab node。