JQuery on click area - don't trigger click event when clicking specific child element?-CodePudding

I have an HTML block that has a little X icon in the corner. When the user clicks within this area I call a function, but I DON'T want to call this function when clicking the X that sits within that area. Here's my example simplified:

html:

<ul id="team_members">
    <li >
        <span>Some text</span>
        <span>Some text</span>
        <span>Some text</span>
        <i ></i>
    </li>
</ul>

jquery:

$("#team_members").on('click', ".member:not(.icon-remove)", function(e) {
    //some code
    alert("clicked!");
 });

What I am hoping will happen, is that clicking anywhere in the "member" <li> will trigger my onclick function but when I click the "icon-remove" the function will NOT be triggered, as I want a different function to trigger there.

CodePudding user response：

The issue with your code is that you are matching a .member element which is not .icon-remove where what you want is a child of .member which is not .icon-remove. So you just need a space between .member and :not(.icon-remove) in the selector:

$("#team_members").on('click', ".member :not(.icon-remove)", function(e) {
    //some code
    alert("clicked!");
 });
 
$("#team_members").on('click', ".member .icon-remove", function(e) {
    //some code
    alert("deleted!");
 });

.icon-remove:after {
  content: 'delete';
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="team_members">
    <li >
        <span>Some text</span>
        <span>Some text</span>
        <span>Some text</span>
        <i ></i>
    </li>
</ul>

CodePudding user response：

The selector string ".member:not(.icon-remove)" will still match the .member element, so the listener will still run. Check if the clicked element - the target - to see if it's the icon or not.

$("#team_members").on('click', function(event) {
  if (event.target.matches('.icon-remove')) {
    // icon clicked
    return;
  }
  //some code
  alert("clicked!");
);