addClass et removeClass ne fonctionnent pas dans Internet Explorer

Les fonctions jQuery addClass et removeClass ne fonctionnent pas correctement lorsque je les utilise pour modifier l'apparence d'une case dans Internet Exploer (IE). Cependant, ils fonctionnent bien dans d'autres navigateurs.addClass et removeClass ne fonctionnent pas dans Internet Explorer

Voici un exemple de code pour illustrer mon problème:

$('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"); 
     } 
    });

Pour tester plus, vous pouvez exécuter le code à l'aide jsFiddler (ne fonctionne pas dans IE): http://jsfiddle.net/tejek/pZJMd/

Source

2011-03-10 Tejek

Ce sélecteur input:#chkbox semble bizarre. Essayez #chkbox si vous avez un seul élément avec l'ID #chkbox (et il s'agit d'un champ <input />).

En outre, vous devriez probablement mettre en cache le résultat de $('#chkbox'), par exemple: (. Seconde arg, non testé)

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

Vous pouvez même utiliser .toggleClass() avec un switch:

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

Avertissement
Non, cela n'explique pas pourquoi cela a fonctionné dans Fx, Chrome, etc. et pas dans IE. Je suppose que l'implémentation du sélecteur est quelque peu différente entre les navigateurs. En général, cela peut même ne pas résoudre le problème, mais seulement faire allusion à des problèmes potentiels (et une solution "plus propre").

Source

2011-03-10 09:49:35 jensgram

ALternativement, '$ chkbox.checked' si vous êtes certain qu'il s'agit d'une case à cocher' ', cf. [Utiliser la puissance impressionnante de jQuery pour accéder aux propriétés d'un élément] (http://whattheheadsaid.com/2010/10/utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element). – jensgram

Votre sélection doit être soit $('#chkbox') si vous voulez travailler avec une seule case à cocher, celui avec id chkbox, ou il devrait être $('input:checkbox') si vous voulez travailler avec toutes les cases à cocher.

De même, il est préférable d'utiliser l'événement change au lieu de l'événement click car l'événement click (théoriquement) ne doit pas se déclencher si la modification a été effectuée par un clic autre que celui de la souris. Peut-être essayer quelque chose comme

ceci:

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

Voir DEMO. Si cela ne vous aide pas, essayez d'ajouter et de supprimer les classes manuellement en HTML pour voir si le problème n'est pas d'ajouter des classes mais de ne pas montrer les effets de l'ajout des classes par un rendu bizarre ou quelque chose de capricieux.

Assurez-vous de commencer votre HTML avec quelque chose comme ceci:

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

pour être sûr que vous êtes toujours tirer le meilleur parti du moteur de rendu d'IE.

Source

2011-03-10 10:14:33 rsp

+1 Bons points. – jensgram

Merci, Maintenant, je viens de savoir, comment obtenir le plus de problème de rendu fixe dans IE –

addClass et removeClass ne fonctionnent pas dans Internet Explorer

Répondre

Questions connexes