Question

我一直致力于为客户组织网站的可排序树列表。您可以添加和拖动页面。每个li包含页面名称和3个图标（锁定，可见和编辑）

我无法弄清楚的是让这些图标可以点击。当您单击其中一个图标时，您只需开始拖动该li。

对于可嵌套列表，我使用的是dbushell的可嵌套列表：https://github.com/dbushell/Nestable

这是我的可嵌套列表的一个示例：

 <div class="dd">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
                <div class="dd-handle">Item 1<img class="icon" src="iconpath" style="float:right;"></div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2<img class="icon" src="iconpath" style="float:right;"></div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3<img class="icon" src="iconpath" style="float:right;"></div>
            <ol class="dd-list">
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4<img class="icon" src="iconpath" style="float:right;"></div>
                </li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">Item 5<img class="icon" src="iconpath" style="float:right;"></div>
                </li>
            </ol>
        </li>
    </ol>
</div>

像在dbushell的可嵌套指南中描述的那样，我使用$('.dd').nestable();使这棵树可以排序/嵌套。

这是点击功能，我无法开始工作：

$(".icon").click(function() {
 console.log("click");
    });

我希望我提供足够的信息，如果不让我知道。此外，我只是编程的初学者和stackoverflow的新手。如果还有什么我做错了我想知道。

Answer 1

您是否尝试过stopPropagation ...尝试：

 $(".lock").click(function(e) {
    e.stopPropagation();
    console.log("click");
 });

选中此Demo Fiddle ...检查删除stopPropagation

后会发生什么

Answer 2

在使用chrome中的devtools困惑之后，我发现我必须将图标放在手柄之外。

<div class="dd">
    <ol class="dd-list">                      put the icon  here
        <li class="dd-item" data-id="1">  <----
              <div class="dd-handle">Item 1<img class="icon" src="iconpath" style="float:right;"></div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2<img class="icon" src="iconpath" style="float:right;"></div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3<img class="icon" src="iconpath" style="float:right;"></div>
            <ol class="dd-list">
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4<img class="icon" src="iconpath" style="float:right;"></div>
                </li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">Item 5<img class="icon" src="iconpath" style="float:right;"></div>
                </li>
            </ol>
        </li>
    </ol>
</div>

我也必须使用Danko的答案。

可排序树中的可点击图标

2 个答案: