如何动态重新绑定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();

我通常使用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() { /* ... */ });