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后重新调用该函数。 –

jquery对话框 - 替换对话框元素

相关问题