JQueryオブジェクトを動的に再バインドする方法

Question

私はJoomla！のモジュールを作っています！ Ajaxを使用して異なるクエリをデータベースにレンダリングするクライアントのページ。これらのクエリの結果、私は異なるDIVのHTMLコード全体を再生成します。私のjQueryオブジェクト内には、cache()という名前の関数があります。この関数は、異なるイベントをアタッチする必要があるすべてのオブジェクトを格納します。私の問題は、これらのdivのいずれかからHTMLコードを再生成するたびに、すべてのオブジェクトを再構築する必要があるため、この作業をより簡単にするために新しい関数recache()を作成したことです。

これは最善の手順ではないと思います。 この関数を毎回cache()と呼ぶことなく、これらのハンドラを有効に保つ方法はありますか、またはこのオブジェクトを動的に再バインドする方法はありますか？

ありがとうございました！ここで

私のコード：

var Object = { 
     init: function() { 
      this.cache(); 
      this.bindEvents(); 
      return this; 
     }, 

     cache: function() { 
        OBJECTS.... 
         this.nameObject = $('#anchor'); 
         etc.. 
     }, 

     recache: function() { 
      Objects to be recached as needed. 
     }, 

     bindEvents: function() { 
      EVENTS attached to the objects. 
         this.nameObject.on('click', 'context', this.nameFunction); 

     }, 

        nameFunction: function() { 
         #CODE.... 
        } 

       }; //END Playlist (Object) 

window.Object = Object.init(); 

は、私が代わりに通常delegate()、live()またはbind()、butI'mわからないのon()機能を使用し、これはまさに私の問題です。

ありがとうございます！

Answer 1

あなたは正しい計画を暗示しました：.on()を使用してください。ただし、リスナーを委任するときは、破棄されないリスナーに委任する必要があります。

や他の言葉で：

// will not do anything useful for this scenario: 
$('.something').on('click', function() { /* ... */ }); 

は親要素のイベントハンドラ

// use a closer ancestor that is NOT destroyed. Best option if you can 
$('#someAncestor').on('click', '.something', function() { /* ... */ }); 

Answer 2

バインドと異なる

// use the document as a listener: will work but not efficient 
$(document).on('click', '.something', function() { /* ... */ }); 

異なっているとしたイベントの委任を使用イベントを処理します。イベントハンドラを親要素にバインドすることで、すべての子要素にイベントハンドラをバインドする必要はありません。

/HTML/

<div id="container"> 
    <button id="button1" class="click">button with click</button> 
    <button id="button2" class="click">button with click</button> 
</div> 

/Javascriptを/

// use this 
$("#container").on("click", ".click", function(){ 
    alert(this.id + ": I've been clicked."); 
}); 

// don't use this 
$(".click").on("click", function(){ 
    alert(this.id + ": I've been clicked."); 
});