Obtuve una página web con una tabla larga para mostrar datos. Usando JQuery Tablesorter hice la tabla ordenable.
La última columna de la página contiene casillas de verificación (con la clase chk ), para permitir al usuario seleccionar varias entradas. En el encabezado de la tabla también hay una casilla de verificación (con el id checkall y sin clase). Al hacer clic en esta casilla de verificación, los valores de todos a otras casillas de verificación deberían cambiar. Como la página necesita algo de tiempo para cargarse por completo, estoy usando la función $(window).load() en lugar de $(document).ready() .
Obtuve el siguiente código JavaScript:
$(window).load(function() { $('#checkall').change(function() { if ($('#checkall').is(":checked")) { $('.chk').prop('checked', true); } else { $('.chk').prop('checked', false); } }); }); Esto funciona como se esperaba en Chromium, pero no en Firefox. Después de jugar con el código, parece que Change-Listener ni siquiera está configurado en Firefox. Nada de lo que puse en el código de la función interna se ejecuta al marcar la casilla de verificación, mientras que la función $(window).load() se ejecuta como se esperaba. El mismo comportamiento ocurre cuando agrego un controlador click() en su lugar o uso on("change, function(){...}) .
¿Es esto un error de JQuery o estoy haciendo algo mal?
Estoy usando JQuery 3.6.0 con JQuery Migrate 1.4.1.
Actualizar:
Descubrí que esto parece ser un problema de tiempo/condición de carrera. Si vuelvo a cargar la página a veces, también funciona en Firefox en aproximadamente 1 de cada 10 intentos. Pero todavía no tengo idea de cuál es la causa y cómo solucionarlo.
Aquí hay un enfoque que usa la delegación de eventos. Necesita un elemento que esté presente en DOM en el momento en que se dispara document.ready . Digamos que ese elemento es la mesa. escribirías:
$(function() { $("#the-table").on("click", "#checkall", function() { // toggle stuff }); });En este caso, el controlador de eventos está vinculado a la tabla. Atrapará todos los clics y, si el autor del evento es la casilla de verificación, activará la devolución de llamada.