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

Question

我最近在jQuery中完成了一些事情，因为我不得不修改它，我觉得它很脏。但让我解释一下。

我的第一次尝试很简单，在页面加载时，我遍历并创建了所有的绑定，如下面所附的。这允许绑定在同一时间发生。

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()函数，因为内容是动态的。问题是，我不能一次创建所有的绑定，相反，每当出现“单击”或“焦点”时，就必须将DOM导航到父对象并返回。因为我想不出一种方法来创建绑定。下面是与上面相同的功能。

    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');
});

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

但是做这样的DOM遍历是非常简单的，所以这个优化实际上并不重要。