I have been developing a customizable tree list for our users to arrange their website content. It allows them to add and rearrange pages by dragging and dropping. Each list item includes the page name and three icons (lock, visible, and edit).
The challenge I am facing is making these icons clickable. Instead of triggering a click event on the icons, they initiate the dragging action of the list item.
For creating the nestable list, I am utilizing dbushell's Nestable plugin: https://github.com/dbushell/Nestable
This is a snippet from my nestable list:
<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>
Following dbushell's guide, I invoked $('.dd').nestable(); to enable sorting and nesting functionality for this tree.
Here is the click function that is causing issues:
$(".icon").click(function() {
console.log("click");
});
I hope I have provided sufficient context. If not, please let me know. Additionally, I am new to programming and StackOverflow, so any guidance on improvements would be appreciated.