jquery-ui-dialog-ダイアログクローズイベントにフックする方法

StackOverflow https://stackoverflow.com/questions/171928

質問

jquery-ui-dialog プラグインを使用しています

特定の状況でダイアログが閉じられたときにページを更新する方法を探しています。

ダイアログから終了イベントをキャプチャする方法はありますか？

閉じるボタンがクリックされたときにコードを実行できることは知っていますが、エスケープまたは右上隅のxで閉じるユーザーをカバーしていません。

役に立ちましたか？

解決

見つけました！

次のコードを使用してcloseイベントをキャッチできます：

 $('div#popup_content').on('dialogclose', function(event) {
     alert('closed');
 });

明らかに、アラートを必要なものに置き換えることができます。
編集： Jquery 1.7以降、bind（）はon（）になりました

他のヒント

ダイアログの作成中にもできると思います（私がやったプロジェクトからコピーされました）：

dialog = $('#dialog').dialog({
    modal: true,
    autoOpen: false,
    width: 700,
    height: 500,
    minWidth: 700,
    minHeight: 500,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

注 close：CloseFunction 

$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true, 
buttons: {
  "SUBMIT": function() { 
    $("form").submit();
  }, 
  "CANCEL": function() { 
    $(this).dialog("close");
  } 
},
**close: function() {
  alert('close');
}**
});

$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

＆quot; close＆quot;ダイアログのプロパティは同じために閉じるイベントを提供します。

Uもこれを試すことができます

$("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            height: 400,
            width: 150,
            position: 'center',
            title: 'Term Sheet',
            beforeClose: function(event, ui) { 
               console.log('Event Fire');
            },
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

これは私のために働いたものです... 

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});
  

jQuery 1.7以降、.on（）メソッドは、イベントハンドラーをドキュメントに添付するための推奨メソッドです。

bind（）の代わりに。 on（）を使用して回答を実際に作成した人はいないため、作成することにしました。

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});

サンプルのようにオプション 'close'を追加し、インライン関数を実行します

close: function(e){
    //do something
}

あなたが話しているウィンドウのタイプを理解している場合、 $（window）.unload（）（ダイアログウィンドウ用）が必要なフックを提供しませんか？

（そして、私が誤解していて、ポップアップブラウザウィンドウではなくCSSで作成されたダイアログボックスについて話している場合、そのウィンドウを閉じるすべての方法は、クリックハンドラを登録できる要素です）

編集：ああ、CSSで作成されたjquery-uiダイアログについて話しているのがわかりました。クラスの ui-dialog-titlebar-close に要素のクリックハンドラーを登録することで、ウィンドウを閉じる X をフックできます。

おそらく、もっと便利なのは、それをすばやく理解する方法を教えてくれることです。ダイアログを表示しながら、FireBugを開いて、ウィンドウを閉じることができる要素を Inspect するだけです。それらがどのように定義されているかがすぐにわかり、クリックハンドラーを登録するために必要なものが得られます。

あなたの質問に直接答えるために、答えは本当に「いいえ」だと思います。 -フックできるクローズイベントはありませんが、「はい」です。 -すべての方法をフックして、ダイアログボックスをかなり簡単に閉じて、必要なものを取得できます。

ページ、ダイアログなど、アイテムの終了イベントをキャプチャするために次のコードを試すことができます。

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top