2012-09-13 33 views
9

Tener este código de ejemplo:Jquery. haga clic en evento no funciona después de evento de cambio?

<input type="text" id="changeid"> 
<a href="#" id="clickb">click</a> 

<script> 
    $('#clickb').on("click", function(event){ 
     alert(1);        
     return false; 
    }); 

    $('#changeid').on("change", function(event){ 
     alert(2);        
     return false; 
    }); 
</script> 

Al poner algo en el campo de texto y haga clic en el enlace de inmediato, sólo desencadena el evento onChange, pero no haga clic en enlace evento. ¿Por qué es eso? Parece que el evento de cambio está bloqueando el evento de clic?

Respuesta

4

Al editar la entrada y haga clic en el enlace ocurre lo siguiente en el interior

  1. Se empieza haciendo clic en el 'enlace'. No hay eventos se generan todavía (ni siquiera mouseDown), porque primero el navegador va a hacer algún trabajo de limpieza:
  2. La entrada pierde el foco y planteará un evento blur
  3. La entrada provoca un evento change, ya que levantó una blur y el valor cambiado
  4. Su change caso de devolución de llamada se abre un alert(2)
  5. los documentos pierde el foco desde la aparición de una nueva ventana
  6. el enlace nunca va a experimentar la click.

La solución no es usar alert (como se propuso xdazz).

+0

Vine aquí con el mismo problema, pero diferentes condiciones previas. Vale la pena señalar que la misma explicación está en juego cuando se utiliza un depurador de scripts para resaltar cambios y hacer clic en eventos. – KyleMit

11

Es bloqueado por alert. Cambie alert por console.log y encontrará dos eventos todos despedidos.

The demo.

$('#clickb').on("click", function(event){ 
    console.log(1); 
    return false; 
}); 

$('#changeid').on("change", function(event){ 
    console.log(2);        
    return false; 
});​ 
+0

+1 para la demostración de trabajo. Bien descrito. – Nope

0

en cambio el evento se dispara solo después de que el elemento esté borroso. Entonces, cuando escribe un texto y hace clic en el enlace primero, el elemento se ve borroso en el campo de texto. La mejor forma de manejar el evento de cambio al tener un evento onkeyup para rastrear los cambios realizados en el campo de texto.

1

uso de este

$("#changeid").live('change', function() ... 
Cuestiones relacionadas