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遍历真是微不足道，所以这个优化真的不重要。

使用.on（）时是否有更好的方法来构造jQuery？

1 个答案: