1

Hola Amigos estoy tratando de cambiar la case de un botón para cada que le de click tendrá una clase diferente y me traerá una respuesta del servidor asíncrona con ajax exactamente para ese botón, resulta que la primer vez le doy click y al inspeccionar consola noto que si cambia la clase y al darle el segundo click no reacciona, parece que no reconociera la nueva clase, ese es mi código:

$("#send").click(function(){
   $('#send').removeClass("btnuno").addClass("btndos");
});


$(".btndos").on('click',function(){
    e.preventDefault();
    alert('funciono');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="send" class="btnuno">clik</button>

2
  • La nueva clase deberías asignarla desde el bloque done o success de Ajax, debido a que las peticiones Ajax son asíncronas.
    – A. Cedano
    Commented el 23 may. 2021 a las 22:22
  • me cambia la clase , pero no me ejecuta el evento del nuevo nombre de la clase, pero en el html si quedo cambiado el nombre de la clase al darle el primer click, no logro comprender que sucedera.
    – Camilo34
    Commented el 23 may. 2021 a las 22:52

1 respuesta 1

2

Tu código presenta dos problemas:

  • Siempre se ejecutará la primer función ya que dicho evento esta suscrito al elemento con id="send".
  • La segunda función no se ejecutará nunca. Ejecutarse el código se buscaran elementos cuya clase sea btndos, y no existe ninguno.

Solución:

Te recomiendo utilizar delegación de eventos

Ejemplo:

// Cuando se haga click en el documento sobre un elemento 
// con class "btnuno"
$(document).on('click', ".btnuno", function() {
  $(this).removeClass("btnuno").addClass("btndos");
  console.log('Elemento "btnuno"')
});

// Cuando se haga click en el documento sobre un elemento 
// con class "btndos"
$(document).on('click', ".btndos", function() {
  $(this).removeClass("btndos").addClass("btnuno");
  console.log('Elemento "btndos"')
});
.btnuno {
  background-color: red;
}

.btndos {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="send" class="btnuno">Click</button>

1
  • 1
    Muchas gracias por tu ayuda, funciona super bien llevaba todo el día haciendo pruebas pero no conocía el tema de delegación de eventos me pondré a estudiarlo, mil gracias por compartir tu conocimiento.
    – Camilo34
    Commented el 23 may. 2021 a las 23:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.