如何动态重新绑定 JQuery 对象答案

【问题标题】：How to dynamically rebind JQuery Objects如何动态重新绑定 JQuery 对象
【发布时间】：2012-04-14 05:29:13
【问题描述】：

我正在为 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()，但我不确定这是否正是我的问题。

提前致谢！

【问题讨论】：

标签： jquery events caching object dynamic-rebinding

【解决方案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() { /* ... */ });

【讨论】：

快点！我们很抱歉，你是对的！当我重新生成 HTML 代码时，所讨论函数的 on() 方法的上下文完全被破坏了。这就是必须重新缓存这些对象的原因。我感觉自己像个新手。 ;) ;) 谢谢！！
酷豆。我只提到这一点是因为您是 SO 新手，但如果此答案有帮助，您可以在经过一定时间后使用左侧的复选框图标“接受”它（15 分钟？不记得了）跨度>
最后我重构了我的应用程序，将所有事件更改为祖先，除了 Safari 的一些小问题也解决了，现在所有的工作都像一个魅力。谢谢！！

【解决方案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.");
});

【讨论】：