Wie JQuery-Objekte dynamisch neu gebunden werden

Question

Ich mache ein Modul für die Joomla! Seite eines Clients, der Ajax verwendet, um verschiedene Abfragen an die Datenbank zu rendern. Das Ergebnis dieser Abfragen ist, dass ich den gesamten HTML-Code der verschiedenen DIVs neu generiere. In meinem jQuery-Objekt habe ich eine Funktion namens cache(), die alle Objekte speichert, die ich brauche, um ihnen die verschiedenen Ereignisse anzuhängen. Mein Problem ist, dass jedes Mal, wenn ich den HTML-Code von einem dieser divs neu generiere, ich alle Objekte neu erstellen muss, also habe ich eine neue Funktion recache() erstellt, um diese Arbeit einfacher zu machen.

Ich denke, das ist nicht die beste Vorgehensweise. Gibt es eine Möglichkeit, diese Handler am Leben zu erhalten, ohne jedes Mal diese Funktion aufrufen zu müssen, oder gibt es eine Möglichkeit, diese Objekte dynamisch erneut zu binden?

Vielen Dank!

Hier mein Code:

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(); 

I on() Funktion in der Regel statt delegate() verwenden, live() oder bind(), butI'm nicht sicher, das ist genau mein Problem.

Vielen Dank im Voraus!

Answer 1

Sie deuteten auf den richtigen Plan: Verwenden Sie .on(). Beachten Sie jedoch, dass Sie beim Delegieren eines Listeners an einen Listener delegieren müssen, der nicht zerstört wird.

Oder mit anderen Worten:

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

unterscheidet sich von

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

, die von

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

Answer 2

Bind der Event-Handler für ein übergeordnetes Element unterscheidet und Ereignis Delegation verwenden, um handle mit den Ereignissen. Wenn Sie den Event-Handler an ein übergeordnetes Element binden, müssen Sie ihn nicht an alle untergeordneten Elemente binden.

/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."); 
});