jQueryダイアログ、ウィンドウのサイズ変更イベントをバインドする方法ですが、ダイアログが存在する場合のみ

Question

私はjQuery UIモーダルダイアログを使用しています。私は、画面の中央に配置されたダイアログを固定し、ブラウザが自動的に更新する位置を変更するようにします。これはデフォルトでは利用できません。

は、それでは私が行っていることである。

dialog = $('<div id="dialog-content" class="ui-dialog-container"></div>').html('<div class="loading">Loading...</div>').dialog({ 
    autoOpen: true, 
    position: ['center', 130], 
    open: function() { 

     // Fixed Positioning 
     $('.ui-dialog').css({position:"fixed"}); 

     // Reposition on Window Resize 
     $(window).resize(function() { 
      console.log('resizing); 
      $('.ui-dialog').dialog("option", "position", "center"); 
     }); 


    } 
}); 

お知らせ：

  console.log('resizing); 

ここでの問題は、ダイアログはサイズ変更イベントがまだ発射された閉じられたときに、この作品ながら、だということです。これをダイアログに関連付けられたバインディングにすると、ダイアログが破棄されたときにバインディングも破棄されます。

おかげ

Answer 1

あなたは、ダイアログが閉じたときに、resizeイベントのバインドを解除する必要があります。

.dialog({ 
    ..., 
    open: function() { 
     ... 
     $(window).bind('resize.dlg', function() { 
      ... 
     }); 
    } 
    close: function() { 
     $(window).unbind('resize.dlg'); 
    } 
}); 

Answer 2

あなたのダイアログのオプションにこれを追加します。

close:function(){ 
    $(window).unbind('resize'); 
}