Как динамически перепривязать объекты 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.");
});