将事件委托给自己答案

【问题标题】：delegate events on self将事件委托给自己
【发布时间】：2012-06-19 15:05:40
【问题描述】：

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

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

如果父元素存在于 DOM 中，插件必须将事件委托给子元素到目前为止一切顺利...

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

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

context = "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'是否更好，并将它们适当地绑定到情况

【问题讨论】：

我很困惑你到底在问什么。此外，底部的示例无法关闭。
这个问题听起来很熟悉，好像是在jQuery论坛上问过的，但我找不到。基本上，事件委托不是那样工作的。委托事件从父元素委托，它不能从父元素委托给同一个父元素。到那时，它就不是委托事件了。
这里是：forum.jquery.com/topic/…
我明白你现在在做什么......但是当你可以绑定到文档开始而不是将其隐藏在插件后面时，它看起来像很多额外的工作。
@jcolebrand：底部的例子是伪代码。

标签： javascript jquery event-delegation

【解决方案1】：

我并不是说这是一个很好的解决方案，但我能想到的唯一方法就是不委托给$(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')
    });

您可能可以更好地满足条件 - 只是按照我的想法输入 :)

【讨论】：