jQuery嵌套li，获取ID

我对嵌套的li和获取单击的元素的ID有问题

假设这是我的代码：

<ul>
    <li id="folderLink_1">Link 1</li>
    <li id="folderLink_2">Link 2
        <ul>
            <li id="folderLink_3">Link 2.1</li>
            <li id="folderLink_4">Link 2.2</li>
        </ul>
    </li>
<ul>

当我点击链接1时，我只收到一个ID通知我，folderLink_1。 然而，当我点击link2.1时，我不仅得到folderLink_3，而且一个接一个地得到folderLink_2

我环顾四周，尝试使用event.stopPropagation（），但是这也会阻止后续需要的操作的发生。

其思想是，这些文件夹充当图像库文件夹结构。单击文件夹时，它会将该文件夹的ID保存到JS变量中。单击包含图像的文件夹时，ajax将使用querystring中的ID检索URL

我曾尝试将LI中的文本环绕一个跨度，但是，我在文本周围有图像，它们需要以相同的方式进行操作（如果单击“保存ID”）

为了更好的帮助，我附上了一些图片

图一（左上）：单击红色部分中的任意菜单项

图二（右上）：单击链接时，该文件夹的ID被保存，另一个菜单向右滑动

图三（左下）：新菜单滑入旧菜单所在位置，文件夹名称显示在顶部的碳纤维部分

单击新链接（如图3所示）时，它不仅会加载所提供图片以外区域的内容，还会记录所单击链接的ID

如果有人建议只保存点击的li的ID，我们将不胜感激。

您有一个输入错误：

alert($(this).attr('id');
------------------------^ Missing end braces.

替换为：

alert($(this).attr('id'));

---

离开这里，您的查询与事件的冒泡有关。当另一个

li

中的

li

具有相同类型的事件时，就会发生此问题

您需要使用以下方法：

$(document).on('click', '[id^=folderLink_]', function(e){
    alert($(e.target).attr("id"));
});

---

从中，添加以下内容：

$(document).on('click', '[id^=folderLink_]', function(e){
    alert($(e.target).attr('id'));
    return false;
});

请参阅更新的。

您有一个输入错误：

alert($(this).attr('id');
------------------------^ Missing end braces.

替换为：

alert($(this).attr('id'));

---

离开这里，您的查询与事件的冒泡有关。当另一个

li

中的

li

具有相同类型的事件时，就会发生此问题

您需要使用以下方法：

$(document).on('click', '[id^=folderLink_]', function(e){
    alert($(e.target).attr("id"));
});

---

从中，添加以下内容：

$(document).on('click', '[id^=folderLink_]', function(e){
    alert($(e.target).attr('id'));
    return false;
});

---

请参阅更新的。

您应该在（）上使用

，因为

live（）

已被弃用，并且

e.target.id

将为您提供实际单击的元素的id：

$(document).on('click', '[id^=folderLink_]', function(e){
    if (this===e.target) alert(e.target.id);
});

---

您应该在（）上使用

on（）

，因为

live（）

已被弃用，并且

e.target.id

将为您提供实际单击的元素的id：

$(document).on('click', '[id^=folderLink_]', function(e){
    if (this===e.target) alert(e.target.id);
});

这样做就足够了

$('[id^=folderLink_]').click(function(e){
    alert($(this).attr('id'));
    e.stopPropagation()
});

这样做就足够了

$('[id^=folderLink_]').click(function(e){
    alert($(this).attr('id'));
    e.stopPropagation()
});

试试这个：

$('[id^=folderLink_]').on('click',function(e){
    e.stopPropagation();
    alert($(this).attr('id'));
});

e.stopPropagation（）

将防止它在DOM树中冒泡

在这里拉小提琴：

试试这个：

$('[id^=folderLink_]').on('click',function(e){
    e.stopPropagation();
    alert($(this).attr('id'));
});

e.stopPropagation（）

将防止它在DOM树中冒泡

---

---

在这里拉小提琴：

对不起，这只是stackoverflow上的帖子中的一个打字错误，实际代码中有右括号，我将更新问题。@PhilCross更新了答案。请检查。再次抱歉！此操作与原始文章中描述的操作相同，但是，当单击嵌套li时，现在显示“未定义”：（非常感谢您的帮助！@PhilCross查看我更新的答案，并查看更新的提琴：@PhilCross没有问题。AJAX将起作用。别担心，因为您只在最后给出了这个。请检查，然后让我们知道。。抱歉，这只是stackoverflow上的帖子中的一个拼写错误，实际代码中有右括号，我将更新问题@PhilCross更新了答案。请检查。再次抱歉！此操作与原始帖子中描述的操作相同，但是，当单击嵌套li时，现在显示“未定义”：（尽管如此，我还是非常感谢您的帮助！@PhilCross查看我更新的答案并查看更新的提琴：@PhilCross没有问题。AJAX会起作用的。别担心，因为您只在最后给出了这一点。请检查，然后让我们知道..您能展示代码如何使用

event.stopPropagation（）吗

？Hi@pktangyue很遗憾我不能使用event.stopPropagation（），因为一旦ID被保存，这个函数就会进行后续的ajax调用。如果我使用stopPropagation，ajax调用就不会发生。您可以向代码展示如何使用

event.stopPropagation（）

？Hi@pktangyue很遗憾我不能使用event.stopPropagation（）一旦ID被保存，这个函数就会进行后续的ajax调用。如果我使用stopPropagation，ajax调用不会发生。Anks for your help@adeneo不幸的是，您提供的代码与原始帖子中的行为相同。我提供了一个到JSFIDLE的链接，感谢您的帮助@adeneo不幸的是，代码是y您提供的操作与原始帖子中的行为相同。我提供了一个指向jsfiddle的链接。顺便说一句，.click（）就是这样完成的，编辑了答案并用代码替换了它，现在它工作得非常好，很高兴它有所帮助；）永远不要忘记传播！；PSorry，虽然这在jsfiddle中确实有效，而且几乎可以做到，但我不能使用“return false”或stopPropagation（），因为保存单击的元素的ID后需要执行ajax调用：（我将+1答案，因为它就快到了！请告诉我以下内容。首先，您在ajax请求之前删除了

alert（）

，其次是

e.stopPropagation（）

位于单击函数的末尾。如果这两项都完成了，那么这就不可能不起作用了。顺便说一句，.click（）就是这样完成的，它编辑了答案并用代码替换了它，现在它工作得很好，很高兴它起到了作用；）永远不要忘记传播！；PSorry，虽然这在jsfiddle中确实有效，而且几乎可以做到，但我不能使用'return false'或stopPropagation（），因为保存单击的元素的ID后需要执行ajax调用：（我将+1回答