Question

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

对话框内的文字应从“原始”更改为“新”，但不是对话框外的文本确实从“main”更改为“changed main”。

我做错了什么，我怎样才能克服这个问题？

修改
我甚至需要在更改发生之前使用对话框。创建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>

onload 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" );
});

Answer 1

这是因为你正在创建2个对话框。要更改对话框的内容，您只需更改对话框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>

Answer 2

当您从元素#dialog创建对话框时，该元素将移出其原始父级（#main）。如果在显示对话框时更改父级内容，则不会更改对话框（这是一件好事，否则会删除对话框）。

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

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

（顺便说一下，你不应该这样做：$( '#main' ).html( '<div id="main">...' )你正在更改内部 HTML内容，所以你不应该重复容器。否则结果是{ {1}}）

Answer 3

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

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

我的解决方案： http://jsfiddle.net/JpLzh/12/

<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();
});

Answer 4

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

你应该把你的Javascript部分放在这个：

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

并删除HTML中的部分。

检查：http://jsfiddle.net/fabio_silva/6Ypck/

Answer 5

使用此代码它将起作用.....

$('#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" );
}

处理完毕后会产生这个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>

更改包含jQuery对话框的html

5 个答案: