0

我正在编写一个需要 4 个参数的事件委托插件：

  • 上下文 = 字符串选择器
  • 子元素 = 字符串选择器
  • 事件 = 字符串
  • fn = 要调用的函数

如果父元素存在于 DOM 中，那么插件必须将事件委托给子元素。

当上下文元素与子元素相同时，就会出现问题。委托不再起作用，因为它期望传递的孩子是上下文的孩子。

这是一个失败的示例输入：

  • 上下文 = “ul”
  • 子元素 = “ul.active”
  • 事件 = “点击”

你不能这样做，$('ul').on('click', 'ul.active', fn())因为有时'ul.active'会与'ul'相同。

我能想到的一种解决方案可能是：

var $context = $('ul');
$(document).on('click', 'ul.active', function(e){
   var $target = $(e.target);
   if($target.is($context) || $target.closest($context).length){
      fn()
   }
})

我想知道在绑定委托事件之前检查'is child == context'是否更好，并将它们适当地绑定到情况

4

1 回答 1

0

我并不是说这是一个很好的解决方案，但这是我能想到的唯一方法$(document)

var parent = 'ul';
var child = 'ul.active';

$(parent).on('click', child, function() {
    console.log('ul.active clicked')
})​;

$(child)
    .filter(function(){
        return $(this).parents(parent).length == 0;
    })
    .on('click', function() {
        console.log('ul.active clicked')
    });​

你可能可以做得更好 - 只是按照我的想法输入:)

于 2012-06-19T16:19:31.083 回答