jQuery事件委托与非平凡的HTML标记？

I have two DIVs, first one has a link in it that contains the id of the second DIV in its HREF attribute (complete setup on jsbin).

我有两个DIV,第一个在其中有一个链接,其中包含其HREF属性中的第二个DIV的ID(在jsbin上完成设置)。

I want to animate the second DIV when user clicks on the first - anywhere on the first. I also want to use event delegation because I'll have many such "DIV couples" on a page (and I'm using a JS snippet from this SO answer).

我希望在用户点击第一个DIV时为第二个DIV制作动画 - 在第一个DIV的任何位置。我也想使用事件委托,因为我在页面上会有很多这样的“DIV夫妇”(我正在使用这个SO答案的JS片段)。

If user clicks on the DIV itself, it will work - just check firebug console output. The problem is, if user clicks on one of the SPANs or the link itself, it doesn't work anymore.

如果用户点击DIV本身,它将工作 - 只需检查firebug控制台输出。问题是,如果用户点击其中一个SPAN或链接本身,它就不再起作用了。

How can I generalize the click handler to manage clicks on anything inside my DIV?

如何概括点击处理程序来管理我的DIV内的任何内容的点击?

Here's the JS:

这是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; 
});

2 个解决方案

#1

It took me so long to write up the question that I decided to post it anyway, perhaps someone suggests a better way.

我花了很长时间才写出我决定发布它的问题,或许有人建议一个更好的方法。

Here's the solution I found (jsbin sandbox):

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

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

#2

Here is my solution. Not sure if that's exactly what you wanted, but it works for me.

这是我的解决方案。不确定这是不是你想要的,但它对我有用。

$(document).ready(function() {
    $('#a').click(function() {
        var a = $("a", this);
        $(a[0].hash).slideToggle();
    });
});

Edit: Tested in both IE7 and Fx3

编辑:在IE7和Fx3中测试

Edit: In that case...

编辑:在那种情况下......

$(function() {
    $("a.tab").click(function() {
        $($(this).attr("hash")).slideToggle();
        return false;
    });
});

Something like that might work (putting the tab class on anything that has a div "attached" to it). However, I'm not sure unless I actually see an example of it. Although if you want it to work when clicking on the span...you would attach the class to the span, and instead do:

这样的东西可能会起作用(将tab类放在任何有“附加”div的东西上)。但是,除非我真的看到它的一个例子,否则我不确定。虽然如果您希望它在单击跨度时起作用...您可以将类附加到跨度,而是执行:

$(function() {
    $("span.tab").click(function() {
        var a = $("a",this);
        $(a.attr("hash")).slideToggle();
    });
});

Not sure if you want an open div to close if another one is opened. If this doesn't solve your problem, it would help if you would put up an example on jsbin...

如果打开另一个div,则不确定是否要关闭open div。如果这不能解决你的问题,如果你想在jsbin上做一个例子会有所帮助......

#1