0

我在嵌套 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，并向右滑动另一个菜单 第三步：新菜单滑到旧菜单所在的位置，文件夹名称出现在顶部的碳纤维部分

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

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

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

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

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

4

4 回答 4

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

请参阅更新的小提琴。

于 2013-01-28T08:13:13.707 回答
1

您应该使用已弃用的 ，on()并将为您提供实际单击的元素的 ID：live()e.target.id

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

小提琴

于 2013-01-28T08:14:59.313 回答
1

这样做就足够了

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

http://jsfiddle.net/KTWnb/

于 2013-01-28T08:17:30.673 回答
0

试试这个：

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

e.stopPropagation()将防止它在 DOM 树中冒泡。

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

于 2013-01-28T08:26:47.200 回答