0

jquery UI ダイアログを含む html があります。次に、ダイアログを含む div を変更します。
ただし、ダイアログの内容は変わりません。ダイアログとそれに含まれる div を一緒に変更できるようにしたい。
ダイアログ div のみを変更すると、期待どおりに動作しますが、それは私が必要とするものではありません。

コード例: http://jsfiddle.net/JpLzh/13/

ダイアログ内のテキストは「オリジナル」から「新規」に変更されるはずですが、変更されません。
ダイアログの外側のテキストは、「メイン」から「変更されたメイン」に変わります。

私は何を間違っていますか、どうすればこの問題を克服できますか?

編集
変更が行われる前でも、ダイアログが機能する必要があります。変更は、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

解決策を見つけました。既に .dialog() メソッドによるダイアログであり、含まれている html を変更しても、既に作成されたダイアログには影響しないため、含まれている div でダイアログを変更できないようです。

私が見つけた解決策は、.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 に答える
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 に答える
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 に答える