¿Cómo puedo entender este comportamiento de casilla de verificación?

Question

Aquí es mi HTML:

<input class='user_roles' id="chk" type=checkbox />
<input id="btn_on" type="button" value="on" />
<input id="btn_off" type="button" value="off" />

Y mi jQuery:

$('#chk').click(function() { 
    if($(this).prop("checked") === true) { 
     alert ("checked"); 
    } 
    else{ 
     alert ("not checked"); 
    } 
}); 

$("[id$=btn_on]").click(function() { 
    $('#chk').click(); 
}); 

$("[id$=btn_off]").click(function() { 
    $('#chk').click(); 
}); 

Un ejemplo de trabajo es here.

Cuando se hace clic en la casilla de verificación con el mouse, se comprueba de inmediato, es decir, la alerta muestra "marcado". Sin embargo, cuando se hace clic en uno de los botones, que indirectamente llama al método de clic en la casilla de verificación, no se hace clic en la casilla de verificación hasta que después de se haya ejecutado el código de clic.

Para probar esto, haga clic en la casilla de verificación un par de veces con el mouse y verá las alertas "marcadas" y "no verificadas", respectivamente. Haga clic en "Activar" y verá la alerta "no marcada", y luego se marcará la casilla de verificación. Si luego haces clic en "Desactivado", verás "marcado" seguido de la casilla de verificación desmarcando.

¿Cuál es la razón de este comportamiento? ¿Cómo puedo asegurarme de que la casilla "verificar" se produzca antes de que se llame al código de escucha de clic, según el comportamiento del mouse?

Answer 1

si es sólo una cuestión de conseguir que funcione, utilice .change() en lugar de .click() en su casilla de verificación, si es acerca de por qué hace lo que hace no tengo ni idea lo siento

Answer 2

Intenta usar setTimeout, que esperará un poco y luego verificará. El problema es que el evento se dispara aún más rápido que el checkbox se cambia por un motivo desconocido.

Working fiddle

$('#chk').click(function() { 
    var $this = $(this); 
    setTimeout(function() { 
     if ($this.prop("checked") === true) { 
      alert("checked"); 
     } 
     else { 
      alert("not checked"); 
     } 
    }, 10); 
}); 

$("[id$=btn_on]").click(function() { 
    $('#chk').click(); 
}); 

$("[id$=btn_off]").click(function() { 
    $('#chk').click(); 
}); 

Answer 3

Encontré este answer on Stack Overflow que crea manualmente un evento y lo envía.

Usted puede ponerlo en una función y llamarlo desde los eventos de clic:

function simulateClick(target) 
{ 
    var e = document.createEvent('MouseEvents'); 
    e.initEvent('click', true, true); 
    target.dispatchEvent(e); 
} 

$("[id$=btn_on]").bind("click", function() { 
    simulateClick($('#chk')[0]); 
}); 

$("[id$=btn_off]").click(function() { 
    simulateClick($('#chk')[0]); 
}); 

Inténtelo aquí: http://jsfiddle.net/FCrSg/10/

casi lo mismo que lo que quería en el MDN: https://developer.mozilla.org/en/DOM/dispatchEvent_example

Answer 4

Usted podría hacer:

function alertState(el){ 
    if(el.prop("checked") === true) { 
     alert ("checked"); 
    } 
    else{ 
     alert ("not checked"); 
    } 
} 
$('#chk').click(function() { 
    alertState($(this)); 
}); 
    $("[id$=btn_on]").click(function() { 
     $('#chk').prop('checked', true); 
     alertState($('#chk')); 
    }); 

    $("[id$=btn_off]").click(function() { 
      $('#chk').removeProp('checked'); 
     alertState($('#chk')); 
    }); 

fiddle here http://jsfiddle.net/FCrSg/9/

Answer 5

utilizar el evento onchange en lugar del onclick:

http://jsfiddle.net/FCrSg/8/

El evento onclick se activa cuando el cuadro se hace clic antes de que cambie el valor de la caja.

El flujo de trabajo es la siguiente: hace clic en el ratón => evento OnClick se dispara => casilla de verificación se marcó => AlCambiar evento se dispara

Answer 6

físicamente al hacer clic en la casilla de verificación hace que ya se puede comprobar antes de la haga clic en evento se desencadena.Al usar jquery para hacer clic, se ejecuta primero el código del evento. Usar el evento de cambio en cambio le dará los resultados deseados.

Vea el ejemplo de trabajo a continuación.

http://jsfiddle.net/FCrSg/3/

Answer 7

Me parece las explicaciones es que este es un error en la forma en que el navegador trata clic en las casillas de verificación:

El comportamiento por defecto debería tener lugar después el controlador de eventos personalizado que se llama . Entonces, lo que ves cuando haces clic en los botones es en realidad el comportamiento correcto. El comportamiento extraño es que cuando hace clic en la casilla, se verifica antes de ejecutar el controlador de eventos personalizado.

Para ver qué raro es eso, puede return false; desde el controlador de eventos. Se supone que esto previene el comportamiento predeterminado. Lo que verá es que la casilla en realidad está marcada cuando hace clic en ella, y luego se desmarca una vez que regrese el controlador de eventos.

Por cierto, estoy usando Firefox 4. No sé cómo es en otros navegadores. Parece que no está relacionado con jQuery, ya que puedo ver el mismo comportamiento divertido al hacer todo sin él.