JQuery UIタブ - ajax経由でロードされたタブのイベントを再バインドする

Question

タブがajax経由でロードされたときにJQuery UIでイベントを再バインドする適切な方法はありますか？たとえば、以下のコードでは、successイベントを呼び出すと、異なるクラスのカスタムクリックイベントハンドラを設定する 'initBinding（）'関数があります。この問題は、タブを数回切り替えてクリックイベントの1つをオフにすると、奇妙な画面フリッカー効果が発生します。ページ全体をリフレッシュしてから、クリックイベントに直接移動すると、フリッカーは発生しません。だから私はそれが何度も束縛することと関係があると思う。

「initBinding（）」メソッドを成功イベントから外した場合、ajax経由でロードされたタブは設定したイベントをトリガーしません。このようなバインディングイベントを処理する標準的な方法がありますか？

$(document).ready(function() { 
    $("#tabs").tabs({ 
     select: function (event, ui) { 
      var tabID = "#ui-tabs-" + (ui.index + 1); 
      $(tabID).html("<b>Fetching Data....Please wait....</b>"); 
     }, 
     ajaxOptions: { 
      error: function (xhr, status, index, anchor) { 
       $(anchor.hash).html("Could not load tab data"); 
      }, 
      success: function (xhr, status, index, anchor) { 
       initBinding(); 
      } 
     } 
    }); 
}); 
function initBinding() { 
    $(".editButton").click(function() { 
     //event logic... 
    }); 
} 

Answer 1

あなたはjQueryの.live()

にを使用する必要がありますが、今、将来的に、現在のセレクタに一致するすべての要素のイベントにハンドラを接続します。あなたのコードで

：

$(".editButton").click(function() { 

はこの技術を使用して

$(".editButton").live('click', function() { 

になるだろう、あなたは完全にinitBinding()機能を削除し、onready機能で.live()ステートメントを使用することができます。