javascript - 具有重要 HTML 标记的 jQuery 事件委托(delegate)？

Question

我有两个 DIV，第一个 DIV 中有一个链接，其中在其 HREF 属性 ( complete setup on jsbin ) 中包含第二个 DIV 的 id。

当用户单击第一个 DIV(第一个 DIV 上的任意位置)时，我想为第二个 DIV 制作动画。我还想使用事件委托(delegate)，因为我将在页面上有许多这样的“DIV 对”(并且我正在使用此 SO answer 中的 JS 片段)。

如果用户单击 DIV 本身，它将起作用 - 只需检查 Firebug 控制台输出。问题是，如果用户单击 SPAN 之一或链接本身，它就不再起作用。

如何通用化点击处理程序来管理对 DIV 内任何内容的点击？

这是 JS:

$('#a').click(function(e) { 
    var n = $(e.target)[0]; 
    console.log(n); 

    if ( n && (n.nodeName.toUpperCase() == 'DIV') ) { 
        var id = $(n).find('a').attr('hash'); 

        console.log(id); 
        $(id).slideToggle(); 
    } 
    return false; 
}); 

Answer 1

我花了很长时间才写下这个问题，所以我决定无论如何都将其发布，也许有人提出了更好的方法。

这是我找到的解决方案(jsbin sandbox):

$('#a').click(function(e) {
    var n = $(e.target)[0];

    var name = n.nodeName.toLowerCase() + '.' + n.className.toLowerCase();

    if (n && (name === "div.clicker" || $(n).parents("div.clicker").length )) {
        var id = $(n).find('a').attr('hash');
        if(!id) {
            id = $(n).parents("div.clicker").find('a').attr('hash');
        }
        console.log(id);
    }
    return false;
});