Création d'éléments de cases à cocher à la volée avec jQuery - comportement étrange IE

Question

Je crée quelques éléments de cases à cocher à la volée avec jQuery et en les ajoutant à un noeud comme si

var topics = ['All','Cat1','Cat2']; 
var topicContainer = $('ul#someElementId'); 

$.each(topics, function(iteration, item) 
{ 
    topicContainer.append(
     $(document.createElement("li")) 
     .append(
      $(document.createElement("input")).attr({ 
       id: 'topicFilter-' + item 
       ,name: item 
       ,value: item 
       ,type: 'checkbox' 
       ,checked:true 
      }) 
      .click(function(event) 
      { 
       var cbox = $(this)[0]; 
       alert(cbox.value); 
      }) 
     ) 
     .append(
      $(document.createElement('label')).attr({ 
       'for': 'topicFilter' + '-' + item 
      }) 
      .text(item) 
     ) 
    ) 
}); 

Les problèmes je rencontre sont deux -fold (il n'y a que dans IE)

• Les cases à cocher sont ajoutées à la page, mais leur état par défaut est décoché lorsque je spécifie 'true' pour cette valeur. (Le test avec 'vérifié' pour la valeur ne fait aucune différence)
• Lorsque alert(cbox.value); est exécuté, la sortie est activée, à chaque fois.

Je pense que le problème principal ici est que j'ai besoin d'un meilleur moyen de définir l'état par défaut des cases à cocher et de définir leur attribut "valeur" par défaut. Mais je n'ai pas encore trouvé un autre moyen.

Remarque: tout ce code fonctionne correctement dans Firefox et Chrome.

Ceci est jQuery 1.3.1 test avec IE 7.0.5730.11

Answer 1

Internet Explorer n'aime pas vous permettre de modifier la valeur vérifiée d'une entrée qui ne fait pas partie du DOM. Essayez de définir la valeur cochée APRÈS que l'élément a été ajouté et voyez si cela fonctionne.

Answer 2

Je réutilisé une partie de votre code et avait un problème similaire par

Why does order of defining attributes for a dynamically created checkbox in jquery affect its value?

J'ai trouvé la résolution était de déplacer simplement la déclaration d'attribut

type: 'checkbox', 

au début-à-dire:

$(document.createElement("input")).attr({ 
type: 'checkbox', 

Ce problème est survenu dans tous les cas. navigateurs pour moi, donc je ne pense pas que c'est un problème d'IE, mais plutôt une "chose" jquery. Pour moi, cela n'a pas d'importance quand je définis la valeur (avant ou après) ajouter. La différence était dans combien de temps/où j'ai déclaré le type de l'entrée.

Answer 3

L'attribut "checked" d'une case à cocher cochée n'a pas l'état "true", il a un état de chaîne "checked". J'ajoute généralement des éléments à DOM avec jQuery en utilisant:

var el = $('<input type="checkbox" id="topicFilter-' + '"' 
     + ' checked="checked" />'); 
$(topicContainer).append(el); 

Plus lisible quand même, IMO, se lit comme HTML. Je serai damné si cela ne fonctionne pas dans IE, aussi, je le fais de cette façon depuis des années.