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 class="member">
<span>Some text</span>
<span>Some text</span>
<span>Some text</span>
<i class="icon-remove"></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.
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!");
);
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 class="member">
<span>Some text</span>
<span>Some text</span>
<span>Some text</span>
<i class="icon-remove"></i>
</li>
</ul>