如何动态重新绑定JQuery对象

我正在为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 /

 
 button with click button with click  

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