Selecting the element without the parent of same class in JQuery

Question

Im having a problem accessing an element in jQuery. Note that this is a dynamic nested list so the triggers is pointed in the document. The problems is that when I try to trigger a mouse event if its a child it will also call the parent value.

<ul>
    <li class="item">list item 1</li>
    <li class="item">list item 2
        <ul>
            <li class="item">list item 9999999</li>
            <li class="item">list item 2</li>
            <li class="item">list item 3</li>
            <li class="item">list item 4</li>
            <li class="item">list item 5</li>
        </ul>
    </li>
    <li class="item">list item 3</li>
    <li class="item">list item 4</li>
    <li class="item">list item 5</li>
</ul>

<script>
    $(document).on('mouseup', '.item', function() {
        console.log($(this).text());
    });
</script>

When I click for example. 'List Item 9999999' this is the output in console.

list item 9999999
list item 2

I only want to target the specific element even if it has the same class with the parent.

score 1 · Accepted Answer · edited May 23 '17 at 12:08

Prevent event bubbling up in DOM tree using event.stopPropagation() method.

$(document).on('mouseup', '.item', function(e) {
    e.stopPropagation();
    console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item">list item 1</li>
  <li class="item">list item 2
    <ul>
      <li class="item">list item 9999999</li>
      <li class="item">list item 2</li>
      <li class="item">list item 3</li>
      <li class="item">list item 4</li>
      <li class="item">list item 5</li>
    </ul>
  </li>
  <li class="item">list item 3</li>
  <li class="item">list item 4</li>
  <li class="item">list item 5</li>
</ul>

<script>
  $(document).on('mouseup', '.item', function(e) {
    e.stopPropagation();
    console.log($(this).text());
  });
</script>

Refer : What is event bubbling and capturing?

Selecting the element without the parent of same class in JQuery

1 Answers1