如何动态地重新绑定JQuery对象 [英] How to dynamically rebind JQuery Objects

问题描述

我正在为Joomla制作一个模块！使用Ajax向数据库呈现不同查询的客户端页面。这些查询的结果是我重新生成不同DIV的整个HTML代码。在我的jQuery对象中，我有一个名为 cache（）的函数，它存储我需要附加不同事件的所有对象。我的问题是，每次从任何这些div重新生成HTML代码时，我必须重建所有对象，所以我创建了一个新的函数 recache（）使这项工作更容易。

我想这不是最好的程序。
有没有办法保持活着这些处理程序，而不必每次调用这个函数 cache（），还是有什么办法动态地重新绑定这个对象？ / p>

谢谢！

这里我的代码：

  var Object = {
 init：function（）{
 this.cache（）; 
 this.bindEvents（）; 
返回这个; 
}，
 
 cache：function（）{
 OBJECTS .... 
 this.nameObject = $（'＃anchor'）; 
 etc .. 
}，
 
 recache：function（）{
根据需要重新对齐的对象。 
}，
 
 bindEvents：function（）{
附加到对象的事件。 
 this.nameObject.on（'click'，'context'，this.nameFunction）; 
 
}，
 
 nameFunction：function（）{
 #CODE .... 
} 
 
}; // END Playlist（Object）
 
 window.Object = Object.init（）; 
  

我通常使用 on（）的 delegate（）， live（）或 bind（），但我不知道这是我的问题。

提前感谢

解决方案

您暗示了正确的计划：使用 .on（）。记住，当您委派监听器时，您需要委托给不会被销毁的监听器。

或换句话说：

  //不会对这种情况做任何有用的事情：
 $（'。something'）。on（'click'，function（） {/ * ... * /}）; 
  

不同于

 $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ /}）; 
  

这不同于

  //使用不被破坏的更靠近的祖先。最好的选择，如果你可以
 $（'＃someAncestor'）。on（'click'，'.something'，function（）{/ * ... * /}）; 
  

I am making a module for the Joomla! page of a client that uses Ajax to render different queries to the database. The result of these queries is that I regenerate the entire HTML code of the different DIVs. Within my jQuery Object I have a function named as cache() that stores all objects that I need to attach them the different events. My problem is that every time I regenerate the HTML code from any of these divs, I have to rebuild all the objects, so I've created a new function recache() to make this work more easy.

I guess this is not the best procedure. Is there any way to keep alive these handlers without having to call this function cache() each time, or is there any way to rebind dynamically this objects?

Thank you!

Here my code:

    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();

I usually use on() function instead of delegate(), live() or bind(), butI'm not sure this is exactly my problem.

Thanks in advance!

解决方案

You hinted at the right plan: use .on(). Remember though that when you're delegating a listener, you need to delegate to a listener that will not be destroyed.

Or in other words:

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

is different from

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

which is different from

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

这篇关于如何动态地重新绑定JQuery对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！