How to set event for current item and ignore parents in jquery?

Question

I have the following HTML structure. I am going to set a mouseup event on an item and get the parent but that returns all parents to me as it is running mouseup event on all .dd-item classes.

<div class="dd" id="nestable">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
                <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li>
            </ol>
        </li>
    </ol>
</div>


$(".dd-item").on("mouseup",function(){
alert($(this).attr("data-id"));
})

The above code return more that alert to me but I just need the first one(parent of current item).

How to solve it?

Answer 1

Events bubble (there are some exceptions). You need to stop the propagation of the event:

$(".dd-item").on("mouseup", function(event) {
  event.stopPropagation();
  console.log($(this).attr("data-id"));
});

A related question: What is event bubbling and capturing?