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

Question

我有一个带有#page div 的文档，其中包含一个jQuery 对话框div #dia 和用于创建它的JS。像这样的：

<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()，但这些似乎都没有帮助。

我该如何正确地做到这一点？

Answer 1

您的脚本设置为仅在文档就绪时运行。

$(function() { ... });

是

的简写

$(document).ready(function () { ... });

因为您将内容动态加载到页面中，而不是实际更改页面，所以它不会触发新的文档就绪事件。随后，x 的值不会改变，新的内容也不会转换为对话框。

如果要动态加载内容，不重新加载页面，需要使用回调函数重新触发对话框初始化。

<script>
    var x;

    function reloadContent(url) {
        $("#page").load(url, function () {
           x = $("#dia").dialog();
        }
    }
</script>
<div id="page">
    <div id="dia">bla</div>
    <script>
        $(function () { x = $('#dia').dialog(); });
    </script>
</div>
<button type="button" onclick="reloadContent('new/url/for/content');>Change Content</button>

如果您要使用$.html() 手动换出内容，那么您还必须手动重新初始化对话框。

Answer 2

加载新内容后，您需要通过回调重新运行选择器。像这样：

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

否则，指针仍将指向过时的元素。

或者，您可以更通用并执行以下操作，以便在每次替换 #page 时重新加载变量：

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

希望这会有所帮助。