Создание элементов флажков на лету с помощью jQuery - странное поведение IE

Question

Я создаю некоторые элементы-флажки на лету с помощью jQuery и добавляю их к узлу, например

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

Проблемы, с которыми я сталкиваюсь, имеют две стороны (есть только в IE)

• Флажки добавляются на страницу, но их состояние по умолчанию не проверяется, когда я указываю 'true' для этого значения. (Тестирование с проверенным значением не имеет значения)
• Когда alert( cbox.value ); выполняется, вывод «включен», каждый раз.

Я думаю, что основная проблема здесь в том, что мне нужен лучший способ установить состояние флажков по умолчанию и установить их атрибут "значение" по умолчанию. Но я еще не нашел другого пути.

Примечание: весь этот код прекрасно работает в Firefox и Chrome.

Это тестирование jQuery 1.3.1 с IE 7.0.5730.11

Answer 1

Internet Explorer не любит позволять вам изменять проверенное значение входа, который не является частью DOM. Попробуйте установить проверенное значение ПОСЛЕ добавления элемента и посмотрите, работает ли оно.

Answer 2

Я повторно использовал ваш код, и у меня была похожая проблема согласно

Почему порядок определения атрибутов для динамически создаваемого флажка в jquery влияет на его значение?

Я обнаружил, что решение было просто переместить объявление атрибута

type:  'checkbox', 

к началу то есть:

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

Эта проблема возникла во всех браузерах для меня, так что я не думаю, что это проблема IE, а скорее "вещь" jquery. Для меня не имело значения, когда я устанавливаю значение (до или после) добавления. Разница была в том, как скоро / где я объявил тип ввода.

Answer 3

Атрибут checked флажка checkbox не имеет состояния true, он имеет состояние строки «флажок». Я обычно добавляю элементы в DOM с помощью jQuery, используя:

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

В любом случае, более читабельным, IMO, читается как HTML. Будь я проклят, если в IE это тоже не сработает, я делал это годами.