0

Running this piece of Bootstrap HTML and JS code below, I am struggling to not initiate the modal when clicking on the dropdown navi-link (e.g. Mark as Read).

 <ul id="notification_items" class="navi navi-hover">
  <!--begin::Item-->
  <li id="1f7cbbe4-2345-486a-ab66-b05601f033a9" data-notification-id="1f7cbbe4-2345-486a-ab66-b05601f033a9" data-notification-subject="Some Subject" data-notification-message="And some message" class="notification_item cursor-pointer navi-item">
    <div class="pr-10 pl-2 navi-link">
      <div class="navi-label mx-5"><span class="label label-dot label-lg label-primary mt-n6"></span></div>
      <div class="navi-text">
        <span class="font-weight-bolder font-size-lg">Some Subject</span><span class="text-muted"> - And some message</span>
        <div class="text-muted font-size-sm">3 hours ago</div>
      </div>
      <div class="notification_actions dropdown dropdown-inline d-none">
        <a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-hover-transparent-primary mr-2" data-toggle="dropdown" aria-expanded="false"><i class="far fa-ellipsis-h"></i></a>
        <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right" style="">
          <ul class="navi flex-column navi-hover py-2">
            <li class="navi-item"><span data-notification-id="1f7cbbe4-2345-486a-ab66-b05601f033a9" class="notification_mark_as_read navi-link"><span class="navi-icon"><i class="fad fa-comment-check"></i></span><span class="navi-text">Mark as Read</span></span></li>
            <div class="dropdown-divider"></div>
            <li class="navi-item"><a href="#" class="navi-link" data-toggle="modal"><span class="navi-icon"><i class="far fa-trash-alt text-danger"></i></span><span class="navi-text text-danger">Delete</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <!--end::Item-->
</ul>

And the simple JS code piece to show the modal when clicking on the <li>:

$(document).on("click", ".notification_item", function () {
   $('#notification').modal('show');
});

I tried to e.stopPropagation(); when clicking on the .notification_actions Which works initially, but then obviously every other event won't work anymore.

tvb
  • 783
  • 1
  • 10
  • 21
  • 1
    Can you provide minimal working example like JS fiddle or sometihng. – Always Helping Aug 21 '20 at 07:45
  • Does this answer your question? [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) – emerson.marini Aug 21 '20 at 07:53

1 Answers1

1

You have to play with the arguments from the event parameter of the click event: target and currentTarget

  • target will return your DOM element on which the click occurred initially

  • currentTarget will always be the DOM element on which your handlers is attached -> in your case the li.notification_item

The solution is to identify the element the click occured on - target. There are a lot of ways - in your case you can detect if your click occured in the dropdown navi-link (.dropdown-menu) by traversing the DOM up until the root menu (#notification_items):

$(document).on("click", ".notification_item", function (e) {
// you traverse up to the root ul, and looking if you are in a dropdown menu
    if ($(e.target).closest('.dropdown-menu', '#notification_items').length > 0) {
    // You are in a drop down menu -> do nothing
  } else {
    // you are somewhere else -> trigger the modal
    $('#notification').modal('show');
  }
});

JSFiddle

P.S. this codes checks if you are in a dropdown-menu, you can use specific selector if you want to check for a specific dropdown.

antanta
  • 618
  • 8
  • 16