addClass y removeClass no funcionan en Internet Explorer

jQuery functions addClass y removeClass no funcionan correctamente cuando los utilizo para cambiar el aspecto de una casilla de verificación en Internet Explorer (IE). Sin embargo, funcionan bien en otros navegadores.addClass y removeClass no funcionan en Internet Explorer

Aquí es código de ejemplo para ilustrar mi problema:

$('input:#chkbox').click(function() 
    { 
     //if($(this).is(":checked")){ 
     if($('input:#chkbox').is(":checked")) 
     { 
      $('input:#chkbox').next("label").addClass("etykieta_wybrana"); 
     } 
     else 
     { 
      $('input:#chkbox').next("label").removeClass("etykieta_wybrana"); 
     } 
    });

A fin de probar esto, se puede ejecutar el código usando jsFiddler (no funciona en IE): http://jsfiddle.net/tejek/pZJMd/

Fuente

2011-03-10 Tejek

Este selector input:#chkbox parece extraño. Pruebe #chkbox si solo tiene un elemento con ID #chkbox (y este es un campo <input />).

Además, probablemente debería almacenar en caché el resultado de $('#chkbox'), por ejemplo: (. Segundo arg, no probado)

var $chkbox = $('#chkbox'); 
$chkbox.click(function() { 
    if ($chkbox.is(":checked")) { 
     $chkbox.next("label").addClass("etykieta_wybrana"); 
    } else { 
     $chkbox.next("label").removeClass("etykieta_wybrana"); 
    } 
});

Incluso puede utilizar .toggleClass() con un switch:

var $chkbox = $('#chkbox'); 
$chkbox.click(function() { 
    $chkbox.next("label").toggleClass("etykieta_wybrana", $chkbox.is(":checked")); 
});

Negación
No, esto no explica por qué funcionó en Fx, Chrome, etc. y no en IE. Supongo que la implementación del selector es algo diferente entre los navegadores. En general, esto puede que ni siquiera resuelva el problema, pero solo insinúa problemas potenciales (y una solución "más limpia").

Fuente

2011-03-10 09:49:35 jensgram

Alternativamente, '$ chkbox.checked' si está seguro de que se trata de una casilla de verificación' ', cf. [Utilizar el impresionante poder de jQuery para acceder a las propiedades de un elemento] (http://whattheheadsaid.com/2010/10/utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element) – jensgram

Su selector debe ser ya sea $('#chkbox') si quieres que funcione con una sola casilla, el que tiene ID chkbox, o debería ser $('input:checkbox') si quieres que funcione con cada casilla.

Además, es mejor utilizar el evento change en lugar del evento click porque el evento click (teóricamente) no debería activarse si el cambio fue realizado por algo más que un clic del mouse.

Tal vez intente algo como esto:

$('input:checkbox').change(function() { 
    var $this = $(this); 
    if($this.is(':checked')) { 
     $this.next('label').addClass('etykieta_wybrana'); 
    } else { 
     $this.next('label').removeClass('etykieta_wybrana'); 
    } 
});

Ver DEMO.

Si no ayuda intente agregar y eliminar las clases manualmente en HTML para ver si tal vez el problema no es agregar clases pero no mostrar los efectos de agregar las clases mediante alguna representación de modos extraños o algo así.

Asegúrese de iniciar su HTML con algo como esto:

<!doctype html> 
<html lang="en-us"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

para estar seguro de que siempre está obteniendo el máximo provecho del motor de renderizado de IE.

Fuente

2011-03-10 10:14:33 rsp

+1 Buenos puntos. – jensgram

Gracias, ahora vengo a saber, cómo solucionar el problema de renderización en IE –

addClass y removeClass no funcionan en Internet Explorer

Respuesta

Cuestiones relacionadas