data - Cómo revincular dinámicamente objetos JQuery

jquery remove class

Question

Estoy haciendo un módulo para Joomla! página de un cliente que usa Ajax para presentar diferentes consultas a la base de datos. El resultado de estas consultas es que regenere todo el código HTML de los diferentes DIV. Dentro de mi Objeto jQuery tengo una función llamada cache() que almacena todos los objetos que necesito para adjuntarlos a los diferentes eventos. Mi problema es que cada vez que regenero el código HTML de cualquiera de estos divs, tengo que reconstruir todos los objetos, así que he creado una nueva función recache() para que esto funcione más fácilmente.

Supongo que este no es el mejor procedimiento. ¿Hay alguna manera de mantener estos manejadores vivos sin tener que llamar a esta función cache() cada vez, o hay alguna forma de volver a vincular dinámicamente estos objetos?

¡Gracias!

Aquí mi código:

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

Usualmente uso la función on() lugar de delegate() , live() o bind() , pero no estoy seguro de que este sea exactamente mi problema.

¡Gracias por adelantado!

Answer 1

Enlace el controlador de eventos en un elemento principal y use la delegación de eventos para manejar los eventos. Al vincular el controlador de eventos en un elemento principal, no necesita vincularlo en todos los elementos secundarios.

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

Answer 2

.on() plan correcto: use .on() . Sin embargo, recuerde que cuando delegue un oyente, debe delegar en un oyente que no será destruido.

O en otras palabras:

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

es diferente de

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

que es diferente de

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