jQuery嵌套li，获取ID

Question

我遇到嵌套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>

我也有这个jQuery：

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

当我点击链接1时，我只收到一个ID提醒我，folderLink_1。 但是，当我点击链接2.1时，我不仅会获得folderLink_3，还会逐个获得folderLink_2。

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

这个想法是，文件夹充当图像库文件夹结构。单击文件夹时，它会将该文件夹的ID保存到JS变量中。当单击包含图像的文件夹时，ajax使用查询字符串中的ID检索URL。

我已尝试在LI内围绕跨度包装文本，但是我在文本周围需要以相同方式执行操作（如果单击则保存ID）。

我已附上图片以获得更好的帮助。

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

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

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

单击新链接（在图像三中）时，它不仅会在所提供图片之外的区域中加载内容，还会记录所点击的LI的ID。

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

Answer 1

你有一个错字：

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"));
});

---

从jsFiddle开始，添加以下内容：

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

请参阅更新后的fiddle。

Answer 2

您应该使用on()，因为live()已被弃用，而e.target.id会为您提供实际点击的元素的ID：

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

FIDDLE

Answer 3

这样就足够了

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

http://jsfiddle.net/KTWnb/

Answer 4

试试这个：

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

e.stopPropagation()将阻止它将其冒出DOM树。

在这里小提琴：http://jsfiddle.net/JYcZS/