Tengo un bloque HTML que tiene un pequeño ícono X en la esquina. Cuando el usuario hace clic dentro de esta área, llamo a una función, pero NO quiero llamar a esta función al hacer clic en la X que se encuentra dentro de esa área. Aquí está mi ejemplo simplificado:
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!"); }); Lo que espero que suceda es que hacer clic en cualquier parte del "miembro" <li> activará mi función onclick, pero cuando haga clic en "icono-eliminar", la función NO se activará, ya que quiero que se active una función diferente allí. .
La cadena de selector ".member:not(.icon-remove)" aún coincidirá con el elemento .member , por lo que el oyente aún se ejecutará. Verifique si el elemento en el que se hizo clic, el objetivo, para ver si es el icono o no.
$("#team_members").on('click', function(event) { if (event.target.matches('.icon-remove')) { // icon clicked return; } //some code alert("clicked!"); );El problema con su código es que está haciendo coincidir un elemento .member que no es .icon-remove donde lo que quiere es un elemento secundario de .member que no es .icon-remove . Entonces solo necesita un espacio entre .member y :not(.icon-remove) en el 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>