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的内容时，旧对话框仍然存在。然后，当我的$（＆＃39;＃dia＆＃39;）。dialog（）代码运行时，它只应用于旧的div，它已经是一个对话框。

我尝试在更换元素之前运行$（＆＃39;＃page＆＃39;）。empty（），x.dialog（＆＃39; destroy＆＃39;）和x.remove（）但没有这似乎有所帮助。

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

Answer 1

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

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

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

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

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

希望这有帮助。

Answer 2

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

$(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()手动换出内容，则还必须手动重新初始化对话框。

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

2 个答案: