0

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

示例代码：http: //jsfiddle.net/JpLzh/13/

对话框内的文本应该从“原始”更改为“新”，但事实并非如此。
对话框外的文本确实从“main”变为“altered 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>

加载 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" );
});
4

5 回答 5

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>
于 2013-01-24T13:08:32.037 回答
1

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

您需要做的是单独更改对话框内容：

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

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

于 2013-01-24T13:33:44.427 回答
1

我找到了解决方案。看起来我无法更改包含 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();
});
于 2013-01-24T13:42:17.533 回答
0

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

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

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

并删除 HTML 中的部分。

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

于 2013-01-24T13:02:35.837 回答
-1

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

$('#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>
于 2013-01-24T13:04:26.257 回答