creazione di elementi casella di controllo al volo con jQuery - strano comportamento IE

Question

Sto creando alcuni elementi casella di controllo al volo con jQuery e aggiungendole ad un nodo in questo modo

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) 
     ) 
    ) 
}); 

I problemi che sto incontrando sono due fold (ci sono solo IE)

• le caselle di controllo vengono aggiunti alla pagina, ma il loro valore predefinito controllato lo stato non è selezionata, quando sto specificando 'vero' per quel valore. (Test con 'controllata' per il valore non fa differenza)
• Quando alert(cbox.value); esegue, l'uscita è 'ON', ogni volta.

Penso che il problema principale qui è che ho bisogno di un modo migliore per impostare lo stato di controllo predefinito delle caselle di controllo e per impostare il loro attributo "valore" predefinito. Ma non ho ancora trovato un altro modo.

Nota: tutto questo codice funziona perfettamente in Firefox e Chrome.

Questo è jQuery 1.3.1 test con IE 7.0.5730.11

Answer 1

Internet Explorer non piace lasciare che si cambia il valore controllato di un ingresso che non è una parte del DOM. Prova a impostare il valore selezionato DOPO che l'articolo è stato aggiunto e vedi se funziona.

Answer 2

ho riutilizzati alcuni di codice e ha avuto un problema simile come per

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

ho trovato la risoluzione è stato quello di spostare semplicemente la dichiarazione di attributo

type: 'checkbox', 

agli inizi e cioè:

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

Questo problema si è verificato in tutto browser per me quindi non penso che sia un problema di IE, ma piuttosto una "cosa" jquery. Per me non importa quando imposto il valore (prima o dopo) append. La differenza era in quanto presto/dove ho dichiarato il tipo di input.

Answer 3

Una controllato attributo "controllato" della casella di controllo non ha uno stato di vero, è uno stato della stringa "controllato". Di solito aggiungo elementi a DOM con jQuery usando:

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

Più leggibile comunque, IMO, legge come HTML. Sarò dannato se non funziona anche in IE, lo sto facendo da anni.