Как динамически перепривязать объекты JQuery

Question

Я делаю модуль для Joomla! страница клиента, который использует Ajax для рендеринга различных запросов к базе данных. Результатом этих запросов является то, что я воссоздаю весь HTML-код различных DIV. В моем объекте jQuery у меня есть функция с именем cache() который хранит все объекты, которые мне нужны, чтобы прикрепить их к различным событиям. Моя проблема в том, что каждый раз, когда я воссоздаю HTML-код из любого из этих div-ов, мне приходится перестраивать все объекты, поэтому я создал новую функцию 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();

Я обычно использую on() функция вместо delegate(), live() или же bind()Но я не уверен, что это именно моя проблема.

Заранее спасибо!

Answer 1

Вы намекнули на правильный план: используйте .on(), Помните, однако, что когда вы делегируете слушателя, вам нужно делегировать слушателю, который не будет уничтожен.

Или другими словами:

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

отличается от

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

который отличается от

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

Answer 2

Свяжите обработчик событий с родительским элементом и используйте делегирование событий для обработки событий. Привязывая обработчик события к родительскому элементу, вам не нужно связывать его со всеми дочерними элементами.

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