jquery - 使用 .on() 时是否有更好的方法来构造 jQuery？

Question

我最近在 jQuery 中完成了一些东西，在不得不更改它之后，我感觉有点脏。但让我解释一下。

我的第一次尝试很简单，在页面加载时我循环并创建了所有绑定(bind)，如下所示，我已在下面附加了这些绑定(bind)。这允许绑定(bind)同时发生。

var flyouts = $('.comment[data-flyout]');

$.each(flyouts,function(){
    var textarea = $(this).find('textarea');
    var flyout = $(this).find('.write-comment__flyouts');
    var addFile= $(this).find('[data-flyout=btn-file]');

   textarea.click(function(){
       flyout.addClass('open');
   });

   addFile.click(function(){
       flyout.addClass('open').removeClass('open-link').toggleClass('open-files');
   });


});

由于该项目，我不得不切换到使用 jQuery 的 .on() 函数，因为内容是动态的。问题是我无法一次创建所有绑定(bind)，相反，每当出现“单击”或“焦点”时，都必须将 DOM 从该点向上导航到父对象并返回。因为我无法找到一种方法来创建绑定(bind)。下面是与上面相同的功能。

    var wrapper    =  $('.flyout-holder');
    var textarea   =  'textarea';
    var flyout     =  '.write-comment__flyouts';
    var addFile    =  '[data-flyout=btn-file]';
    var parent     =  '.write-comment[data-flyout]';

   wrapper.on('click',textarea,(function(){
       $(this).closest(parent).find(flyout).addClass('open');
   });

   wrapper.on('click',addFile,function(){
       $(this).closest(parent).find(flyout).addClass('open').removeClass('open-link').toggleClass('open-files');
   });

所以我现在必须去找到每次发生事件时我想要执行某些操作的相关对象。而不是一开始就把一切都连接起来。使用 jQuery 的 .on() 函数时是否有更好的方法来做到这一点？

Answer 1

您所做的是正确的方法，因为在您运行代码时 DOM 并不存在，因此处理程序必须在运行时找出它。

<小时/>

如果您的问题与 DOM 的遍历有关，您可以在当前元素中存储对最终元素的引用。

也许是这样的(尽管我怀疑这是一种改进..)

var wrapper    =  $('.flyout-holder');
var flyout     =  '.write-comment__flyouts';
var parent     =  '.write-comment[data-flyout]';

wrapper.on('click','textarea',(function(){
   var self     = $(this),
       myFlyout = self.data('flyout') || self.data('flyout',self.closest(parent).find(flyout)).data('flyout');

   myFlyout.addClass('open');
});

wrapper.on('click','[data-flyout=btn-file]',function(){
   var self     = $(this),
       myFlyout = self.data('flyout') || self.data('flyout',self.closest(parent).find(flyout)).data('flyout');

   myFlyout.addClass('open').removeClass('open-link').toggleClass('open-files');
});

第一次单击某个元素时，它将在flyout 键下的data 中存储对其相对flyout 元素的引用。接下来的时间它将使用这个缓存版本，而不是通过 DOM 遍历来搜索它。

但是进行这种 DOM 遍历确实是微不足道的，因此这种优化实际上并不重要。