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() { /* ... */ });

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

如何动态重新绑定JQuery对象

2 个答案: