Question

我有以下示例HTML代码：http://pastebin.com/Mya6tPc6 这是我试图使用的jQuery代码：

$("#folder1").click(function(){
 alert($(this).attr('id'));
});

$("#f1").click(function(){
 alert($(this).attr('id'));
});

问题在于：如果用户点击元素'folder1'，它将在警告框中显示'folder1'。那样就好。如果用户点击'folder1.1'，它将在警告框中显示'folder1'，实际上我不希望它在此处做任何事情。如果用户点击“f1”，它将首先显示一个带有“f1”的警告框，然后显示另一个带有“folder1”的警告框。我需要它只显示一个带'f1'的警告框。

请有人告诉我该怎么做？结构是目录树，因此它可以具有无限数量的深度。我需要设置它，当用户点击文件夹LI时，一个函数将在另一个区域显示该文件夹的内容。

我知道还有其他文件管理员，但在这种情况下我需要自己创建一个。

我搜索了'jQuery和嵌套的UL'以及google中的排序，但到目前为止我还没有找到解决方案。我是否搜索了错误的术语？

非常感谢您的回答。

祝你好运，贝。

Answer 1

还不完全确定你想要什么，但听起来你遇到了事件冒泡的问题。这意味着，如果单击嵌套元素，事件将首先触发该元素，然后触发它的父元素，直到到达文档中的顶级元素。你可以：

1）在处理对孩子的点击后取消该事件（＃f1）;

$("#f1").click(function( e ){
    e.preventDefault();
    alert($(this).attr('id'));
    return false;
});

2）检查事件的目标是否是您当前正在处理事件的元素;见event object

$("#folder1").click(function( e ){
    if ( e.target == e.currentTarget ) {
        // do something
    }
});

Answer 2

（评论框不允许我发布此消息，因此我使用的是答案框。我希望这不是问题。）

你好保罗，

感谢您的评论。以下效果很好：

var i=0;

$("#folder1").click(function( e ){
    $("#files").append(++i + ". " + $(this).attr('id')+"<br>");
    return false;
});

$("#folder1_1").click(function( e ){
    var me = e.currentTarget;
    $("#files").append(++i + ". " + $(this).attr('id')+"<br>");
    return false;
});

$("#f1").click(function( e ){
    $("#files").append(++i + ". " + $(this).attr('id')+"<br>");
    return false;
});

i仅用于测试目的。

e.preventDefault（）;与jQuery Treeview插件不兼容。所以我不得不删除它。好像回归假;做的工作。

此：

if（e.target == e.currentTarget）...在任何情况下，我都知道你是否从这个比较得到了真的吗？

我可以使用以下内容：

    if(e.currentTarget === this)
    {
        alert("Its me!");
    }

我不确定这是否适用于所有浏览器，在Safari和Chrome上看起来没问题。

非常感谢关于事件冒泡等事情的想法和信息。

祝你好运，贝。

你好，江江，

谢谢，你是对的。我会从现在开始这样做。

祝你好运，贝。

使用jQuery在嵌套的UL LI结构中查找LI元素的id

2 个答案: