Question

我有两个DIV，第一个有一个链接，其中包含其HREF属性（complete setup on jsbin）中第二个DIV的ID。

我希望在用户点击第一个DIV时为第二个DIV制作动画 - 在第一个DIV的任何位置。我也想使用事件委托，因为我在页面上会有很多这样的“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;
});

Answer 2

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

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

编辑：在IE7和Fx3中都进行了测试

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

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

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

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

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

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

2 个答案: