jQuery: no agrega class para labelr o lo elimina instantáneamente, respectivamente

Antes que nada, soy nuevo en jQuery. No es una ciencia revolucionaria crear un progtwig simple, pero el efecto del siguiente código no tiene ningún sentido para mí. Mi intención es que después de hacer clic en un elemento con una class ".button", se agregue una nueva class a ese elemento. De lo contrario, click otro lugar; la nueva class actual debe eliminarse. Lamentablemente, el código en else se ejecuta, aunque la condición sea verdadera. ¿Cuáles son los defectos de mi idea? ¿Podría proporcionar una solución a ese problema?

$(function() { $("*").click(function() { var ret = $(this).hasClass("button"); if (ret) { $(".button").addClass("newclass"); } else { $(".button").removeClass("newclass"); } }); $("form").on("submit", function() { return false; }) }); 
 .newclass { color: networking; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <form method="get" action=""> <input type="text" name=""> <input type="submit" name="" class="button"> </form> 

click burbuja de events desde el elemento al que se hizo clic hasta el documento, pasando por todos los elementos en ruta.

Entonces, lo que sucede cuando haces clic en tu button es que mientras se agrega la class (porque el button tiene el button class), el clic aparece en la form (que no) y luego en el body (que no) y luego en html (que no) Se llama a su controller en cada nivel, porque lo ha adjuntado a todos los elementos, por lo que gana el último ( html ).

Por lo tanto, el cambio mínimo en su código es detener la propagación (indicar al evento que deje de burbujear) cuando maneja el clic:

 $("*").click(function(e) { // Note --------------^ e.stopPropagation(); // <=== var ret = $(this).hasClass("button"); if (ret) { $(".button").addClass("newclass"); } else { $(".button").removeClass("newclass"); } }); 

Ejemplo:

 $(function() { $("*").click(function(e) { e.stopPropagation(); var ret = $(this).hasClass("button"); if (ret) { $(".button").addClass("newclass"); } else { $(".button").removeClass("newclass"); } }); $("form").on("submit", function() { return false; }) }); 
 .newclass { color: networking; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <form method="get" action=""> <input type="text" name=""> <input type="submit" name="" class="button"> </form> 

Primero agrega un selector a tu formulario como este:

 <form method="get" action="" class="simpleForm"> <input type="text" name=""> <input type="submit" name="" class="button"> </form> 

El próximo objective es escuchar cualquier evento de clic, verificando que el clic solo haya ocurrido en las inputs.

 $('.simpleForm').unbind('click').bind('click', function(e) { if($(this).hasClass('button') && e.target.tagName === 'input') { $(this).addClass("newclass"); } else { $(this).removeClass("newclass"); } });