2

page1.htmlとpage2.htmlの2つのページがあります。

page1.htmlには次のコードがあります。

$(document).ready(function() {
                   $('#mydialog').dialog({autoOpen : false, modal : true});
                   $('#myopenlink').click(function() {
                                             $('#mydialog').load('page2.html');
                                             $('#mydialog').dialog('open');
                                             return false;
                                           });                                 
                   });

page1.htmlの関連するHTML要素： 

<a href="#" id="myopenlink"> Open </a>
<div id="mydialog"> </div>

「myopenlink」をクリックすると、page2.htmlを表示するモーダルダイアログが表示されます。

現在、page2.htmlに、別のリンク（または送信ボタンなど）があります。クリックしたらダイアログを閉じたい（つまり、ロードしたページ内からダイアログを閉じたい）。

これは可能ですか？

編集：

少し掘り下げた後、私の質問は特にダイアログボックスに関するものではないと思います。これが私がやろうとしていることです：

page2.htmlコンテンツ：

<a href="#" id="mycloselink"> close </a>

page1.htmlコンテンツ：

function closeLinkClicked(event) {
    event.preventDefault();
    alert('Please Reach this point so I replace this with close dialog');
}

function doneLoading(data) {
    $('#mydiv').on('click', '#mycloselink', closeLinkClicked);
}

$(document).ready(function() {
                             $('#mydiv').load('page2.html', doneLoading);
                            });

もちろん、page1.htmlにもこれがあります。

<div id="mydiv"> </div>

page2からmydivにロードされたリンクをクリックしても、何も起こりません（アラートが表示されることを期待しています）。

私は何が間違っているのですか？

どうもどうも

4

2 に答える 2

3

Hiya このデモが好き http://jsfiddle.net/mhLc5/6/ または更新された回答 =>このhttp://jsfiddle.net/Pb2eR/ または http://jsfiddle.net/Pb2eR/1/

動的追加デモ: http://jsfiddle.net/Pb2eR/13/

.dialog('close')SO ダイアログを閉じるには、残りのデモを呼び出す必要があるだけで、遊んでみるのに適した場所が得られます。

API は次の場所にあります: http://jqueryui.com/demos/dialog/

よく読んでください：http://forum.jquery.com/topic/close-a-jquery-ui-dialog-from-the-inside

お役に立てれば！

コード

 buttons: {

            'Submit': function() {
                $Dialog_div.dialog('close');
            }

サンプルコードの残りの部分

var $Dialog_div;

function fnOpenDialog() {
    $Dialog_div = $('<div id=\'ThisDialog\'>Hello Page 2</div>').prependTo('body');

    $Dialog_div = $('#ThisDialog').dialog({
        autoOpen: true,
        draggable: true,
        resizable: true,
        title: 'Dialog stack overflow HULK',
        modal: true,
        stack: true,
        height: ($(window).height() * 0.95),
        width: ($(window).width() * 0.9),

        buttons: {

            'Submit': function() {
                $Dialog_div.dialog('close');
            }

        }

    });

}

$('#ClickMe').click(fnOpenDialog);​
于 2012-06-02T13:17:28.683 に答える
2

イベントハンドラのダイアログボックスを実際に閉じるには、次を使用します。

$(this).closest('.ui-dialog-content').dialog('close');

DOMをトラバースして、新しくロードされたコンテンツから、ダイアログボックスでラップされている元のdivにバックアップします。

実際にイベントを登録するために投稿したコードに明らかに問題はありませんが、私が見る限り、ここでイベント委任を使用する必要はまったくありません。

が完了するまで登録を実行しないため.load、でイベントハンドラーを直接登録できます#mycloselink。

于 2012-06-02T20:44:55.527 に答える