更改包含jQuery对话框的html

我有一个带有jQueryUI对话框的html。 然后我更改包含对话框的div。
但对话框的内容不会更改。 我希望能够同时更改对话框及其包含的div。
如果我只更改对话框div，它将按预期工作，但这不是我需要的

示例代码：

对话框中的文本应从“原始”更改为“新”，但实际情况并非如此。
对话框外部的文本确实从“主”更改为“更改的主”

我做错了什么，如何克服这个问题

编辑
我需要的对话框工作，甚至在变化发生之前。更改可能在创建html后很长时间内发生

html

<div id="main">
main
<br>
<button id="opener">Open Dialog</button>
<div id="dialog">
    original
</div>
</div>
<script>
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>

主要的


打开对话框
起初的
$（“#对话框”）。对话框({
自动打开：错误，
身高：500，
宽度：800，
莫代尔：是的，
可调整大小：false，
真的，
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});

加载的javascript

$('#main').html('<div id="main">altered main<br><button id="opener">Open Dialog</button><div id="dialog">new</div></div>');
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

$（'#main'）.html（'altered main
Open Dialognew'）；
$（“#对话框”）。对话框({
自动打开：错误，
身高：500，
宽度：800，
莫代尔：是的，
可调整大小：false，
真的，
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});

您正在复制脚本代码，但运行的代码是HTML部分（标记之间）的代码，并且缺少javascript部分的第1行

您应该将Javascript部分放在以下内容中：

$(document).ready(function () {
   //JS Code here...
});

并删除HTML中的部分

---

检查：

使用此代码它会工作的

$('#main').html('<div id="main">altered main<br><button id="opener" onclick="OpenDialog();">Open Dialog</button><div id="dialog">new</div></div>');
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

function OpenDialog() {
    $( "#dialog" ).dialog( "open" );
}

$（'#main'）.html（'altered main
Open Dialognew'）；
$（“#对话框”）。对话框({
自动打开：错误，
身高：500，
宽度：800，
莫代尔：是的，
可调整大小：false，
真的，
});
函数OpenDialog（）{
$（“对话框”）。对话框（“打开”）；
}

处理后，它将生成此html代码

<div id="main">
main
<br>
<button id="opener" onclick="OpenDialog()">Open Dialog</button>
<div id="dialog">
    original
</div>
</div>
<script>
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

function OpenDialog() {
    $( "#dialog" ).dialog( "open" );
}
</script>

主要的


打开对话框
起初的
$（“#对话框”）。对话框({
自动打开：错误，
身高：500，
宽度：800，
莫代尔：是的，
可调整大小：false，
真的，
});
函数OpenDialog（）{
$（“对话框”）。对话框（“打开”）；
}

这是因为您正在创建两个对话框。要更改对话框的内容，只需更改对话框div：

    <div id="main">
        main
        <br>
        <button id="opener">Open Dialog</button>
            <button id="changer">change Dialog</button>
        <div id="dialog">
            original
        </div>
    </div>
<script>
    $( "#dialog" ).dialog({
                    autoOpen: false,
                    height: 200,
                    width: 200,
                    modal: true,
                    resizable:false,
                    draggable:true,
    });

        $( "#opener" ).click(function() {
          $( "#dialog" ).dialog( "open" );
        });


        $( "#changer" ).click(function() {
          $( "#dialog" ).html("new");
        });
</script>

主要的


打开对话框
更改对话框
起初的
$（“#对话框”）。对话框({
自动打开：错误，
身高：200，
宽度：200，
莫代尔：是的，
可调整大小：false，
真的，
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
$（“#转换器”）。单击（函数（）{
$（“#dialog”）.html（“新建”）；
});

从元素

#dialog

创建对话框时，元素将移出其原始父元素（

#main

）。如果在显示对话框时更改父对象的内容，则不会更改对话框（这是一件好事，否则将删除该对话框）

您需要做的是分别更改对话框内容：

$( '#main' ).html( 'The new content except #dialog' );
$( '#dialog' ).html( 'New dialog contents' );

（顺便说一句，您不应该这样做：

$（“#main”）.html（“…”）

您正在更改内部html内容，因此不应该重复容器。否则结果是

..

）

我找到了一个解决方案。 看起来我无法更改包含div的对话框，因为它已经是由.dialog（）方法生成的对话框，并且当我更改包含的html时，它不会影响已创建的对话框

我找到的解决方案是使用.destroy（）方法销毁旧对话框，然后从新修改的html创建一个新对话框

我的解决方案：

主要的


打开对话框
兑换部
起初的
$（“#对话框”）。对话框({
自动打开：错误，
身高：500，
宽度：800，
莫代尔：是的，
可调整大小：false，
真的，
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
函数更改_div（）
{
$（“#dialog”）.dialog（“销毁”）；
$（'#main'）.html（'altered main
Open Dialognew'）；
$（“#对话框”）。对话框({
自动打开：错误，
身高：500，
宽度：800，
莫代尔：是的，
可调整大小：false，
真的，
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
}
$（“#转换器”）。单击（函数（）{
更改_div（）；
});

我知道我可以更改对话框div，但我想用包含它的div来更改它。Kyle的解决方案显示了正确的原则。如果更改包含的div，无论何时何地更改，它都会更改对话框内容。请参见，不要使用

.dialog（）

而使用

.html（）

（或

.text（）

或任何更改div的内容）。正如我所说，我想更改包含对话框的整个div，而不仅仅是对话框。在您的示例中，您在对话框选择器上使用.html（），而我想在包含div的选择器上使用它。您的意思是什么？对话框在更改之前工作。您可以在这一行中进行更改：$（'#main'）.html（'altered main
Open Dialognew'）；尝试删除它，您的div将与原始内容保持一致。这和什么有关系？我有对话框，但几分钟后我想更改它及其包含的div。检查这是你想要的吗？不，它需要有原始值，直到我更改它。这听起来不错，我找到了一种方法，使用destroy并再次创建对话框。关于更改内部html，你也是对的，我没有注意到。

<div id="main">
main
<br>
<button id="opener">Open Dialog</button>
<button id="changer">Change div</button>
<div id="dialog">
    original
</div>
</div>
<script>
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>


function change_div()
{
$( "#dialog" ).dialog( "destroy" );
$('#main').html('<div id="main">altered main<br><button id="opener">Open Dialog</button><div    id="dialog">new</div></div>');

$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
}


$( "#changer" ).click(function() {
  change_div();
});