jquery對話框 - 替換對話框元素

我有一個帶#page div的文檔，它包含一個jQuery對話框div #dia和用於創建它的JS。像這樣的東西：jquery對話框 - 替換對話框元素

<script> 
var x; 
</script> 
<div id="page"> 
    <div id="dia">bla</div> 
    <script> 
    $(function() { x = $('#dia').dialog(); }); 
    </script> 
</div>

這工作到目前爲止很好。但是，現在我需要刪除#page的內容並將其替換爲新內容。這個新內容將包含另一個ID爲#dia的div和相同的JS代碼，以便將其作爲一個對話框。

這似乎不起作用。相反，似乎x仍然是替換之前的舊對話框。

我認爲會發生的事情是，當我創建對話框時，jQuery將#dia div移動到其他位置，因此當我替換#page的內容時，舊對話框仍然存在。然後，當我的$（'＃dia'）。dialog（）代碼運行時，它只會應用於舊的div，它已經是一個對話框。我已經嘗試在替換元素之前運行$（'＃page'）。empty（），x.dialog（'destroy'）和x.remove（），但是這似乎沒有任何幫助。

我該如何正確做到這一點？

來源

2014-02-18 Nils

變量x被分配給全局窗口對象，對吧？所以當內容被刪除或刪除時它肯定仍然存在。 – Blauharley

是的，它仍然存在。但是，一旦新的

您需要在加載新內容後通過回調重新運行選擇器。像這樣：

$("div#page").load("/your/url/", function() { 
    x = $('#dia').dialog(); 
});

否則，指針仍然會指向過時的元素。

或者，你可以去更通用的，做這樣的事情，以重新加載可變每次#page被替換：

var x; 
function initDialog(){ 
    x = $('#dia').dialog(); 
} 
$(document).ready(function(){ 
    $("div#page").ajaxSuccess(initDialog); 
});

希望這有助於。

來源

2014-02-18 19:56:48

我沒有使用.load（）方法，但通過html（）手動替換內容，所以我不認爲這適用。 – Nils

然後，您可以簡單地將對話框功能封裝到函數中，如上所述，並在替換html後重新調用該函數。 –

相關問題