jQuery gatillo ('clic') no disparar caso .click en casilla

Question

tengo tabla con un registro de entrada, toda casilla de verificación en el encabezado que comprueba todas las casillas de verificación en la columna de la tabla:

<input class="check-all" type="checkbox" id="masterCheck" /> 

Sin embargo, en una de mis páginas me gustaría verificar automáticamente la casilla de verificación de verificación en la carga de la página.

Para hacer esto he intentado disparar un gatillo ('clic') la función como la siguiente:

$(document).ready(function() { 
    if ($("#masterCheck").attr('checked')) { 
    } else { 
     $("#masterCheck").trigger('click'); 
    } 
}); 

Esto comprueba la casilla de verificación bien, pero no se dispara mi evento de clic personalizado para casillas de verificación con la clase .Comprobar todo (abajo):

$(function() { 
    $('.check-all').click(function() { 
     $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked); 
    }); 
}); 

también he intentado añadir un Javascript setTimeout, pensando que la función personalizada clic no estaba siendo cargado del todo todavía, pero todavía no lo hice disparar la función de clic personalizado después de esperar 1 , 2 y 3 segundos.

Al cargar la página, puedo desmarcar la casilla de verificación marcada previamente y volver a verificarla para marcar perfectamente todas las casillas de verificación de la columna.

¿Debo agregar algo especial a mi jQuery en el documento. Listo para permitir que active el evento de clic personalizado?

*** EDIT1:

Ok, he intentado añadir el evento personalizado botón derecho del ratón encima de la función document.ready en mi página para asegurarse de que está cargada (como el evento de clic personalizada anterior está en un maestro archivo .js utilizado en mi _Layout). Además de esto, modifiqué la clase de mi casilla de verificación para que se corresponda con mi nuevo evento de clic personalizado, de modo que no entre en conflicto con el de mi archivo .js principal.

<input class="check-allx" type="checkbox" id="masterCheck" /> 


// Check all checkboxes when the one in a table head is checked: 
    $(function() { 
     $('.check-allx').click(function() { 
      $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked); 
      alert(this); 
     }); 
    }); 
// Check for unchecked masterCheck 
    $(document).ready(function() { 
     if ($("#masterCheck").attr('checked')) { 
     } else { 
      //$("#masterCheck").trigger('click'); 
      $("#masterCheck").click(); 
     } 
    }); 

Esto parece tirar mi alerta en el evento de clic a medida que es progreso, pero fue en vano hacer todas mis casillas de verificación como deberían. Nota: También cambié el disparador ('clic') a .click(), que ambos hacen lo mismo en mi situación.

Answer 1

Actualización: Esto solo se aplica a jQuery 1.8 y siguientes. Esto fue fixed in jQuery 1.9.

El problema es que llamar manualmente click() en jQuery funciona de forma diferente a un clic real.

Cuando realmente hace clic, primero se cambia el estado de la casilla de verificación, luego se llama al controlador de clic.

Cuando llame al click(), primero se llama al controlador de clic, luego se cambia el estado de la casilla de verificación.

Por lo tanto, cuando llame al click, en su controlador de clics, this.checked seguirá siendo falso. Puede solucionar este problema por lo que es un manejador de change en lugar de un controlador de click, así:

$('.check-allx').change(function() { 
    $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked); 
}); 

Ver In jQuery, why does programmatically triggering 'click()' on a checkbox not immediately check it? para una explicación más completa de la diferencia entre el manual de clics reales y jQuery desencadenado clics.

Answer 2

Establecer el atributo comprobado programáticamente no desencadena un evento de clic correspondiente, por lo que tendría que agregar su propio .trigger('click') cuando configure el atributo.

Answer 3

Bien, teniendo en cuenta que solo necesitaba esa funcionalidad en esa página individual, he salido de la manera más fácil y evité tratar de lanzar el evento de clic personalizado todos juntos.

Después de un café esta mañana fue un poco más claro para mí. He agregado este código como una solución alternativa.

$(document).ready(function() { 
     $('table#OHTable input[type=checkbox]').attr('checked', 'checked'); 
    }); 

Esto simplemente comprueba todos mis casillas de verificación en mi mesa, y el evento adecuado clic todavía se desencadena cuando se hace clic en mi masterCheck después del hecho.

Answer 4

Ejemplo:

$("#recurrence").trigger('click'); 

La continuación se ejecutará después el cambio de estado casilla de verificación.

$("#recurrence").click(function() { 
    $(this).change(function(){ 
     if (this.checked) { 
      $(".recurr-section").show(); 
     } else { 
      $(".recurr-section").hide(); 
     } 
    });   
});