1

我在 Html 中有一个列表树，例如：

<ul class="myTree">
    <li class="treeItem">Category 1
        <ul>
            <li class="treeItem">Subcategory 1 1</li>
            <li class="treeItem">Subcategory 1 2
                <ul>
                    <li class="plus"><input type="text" value="Add a product"/></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="treeItem">Category 2
        <ul>
            <li class="treeItem">Subcategory 1 1</li>
            <li class="treeItem">Subcategory 1 2
                <ul>
                    <li class="plus"><input type="text" value="Add a product"/></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

如您所见，这是一个详细的列表。

现在我需要的是那些“treeItem”类元素上的点击事件，它将检索相应的名称（Category 1、Subcategory 1 1 等）。

我想出了这个：

$(".myTree").on("click", ".treeItem", function() {
    var categoryName = $(this).text();
    alert(categoryName);
});

我现在面临的唯一问题是首先，categoryName包含

Category 2

                Subcategory 1 1
                Subcategory 1 2

当我单击“级别 1” <li>（例如类别 1）时。我可以通过向我的 's 添加一些catname属性来绕过它，<li>但最重要的是，当我单击“级别 2” <li>（例如子类别 1 1）时，它首先触发级别 2 上的点击事件<li>，执行这些操作，然后触发一个新的1 级的点击事件<li>...

这样做的原因很明显，但我需要一种方法让它只在最高级别发生一次（当我点击“子类别 1 1”时，它不应该在“类别 1”上触发事件）。

还值得注意的是，这棵树将自动生成，这意味着我可以将 my 标记treeItem为其他一些类，例如“level1”或类似的东西，但如果我可以避免这种情况，我会喜欢它。

......好吧，这个问题可能需要一个总结，因为我觉得我有点迷失了......

  1. 我需要一个列表树上的点击事件
  2. 我需要仅在最高级别（最深）触发该点击事件。
  3. 添加一些类名是可能的，但希望避免。

谢谢！

4

2 回答 2

3

首先，您需要使用event.stopPropagation来阻止事件在 DOM 中冒泡并重复自身。然后你需要在li. 试试这个：

$(".myTree").on("click", ".treeItem", function(e) {
    e.stopPropagation();
    var categoryName = $(this).contents().filter(function() {
        return !!$.trim(this.innerHTML||this.data);
    }).first().text();
    alert(categoryName);
});

示例小提琴

于 2012-05-02T09:51:33.250 回答
0

您需要event.stopPropagation()在活动中使用。

$(".myTree").on("click", ".treeItem", function(event) {
    var categoryName = $(this).text();
    alert(categoryName);
    event.stopPropagation()
});
于 2012-05-02T09:51:17.713 回答