javascript - 可排序树中的可点击图标

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

会发生什么