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

Я создаю некоторые элементы флажков на лету с помощью 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)

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

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

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

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

Ответов (3)

Решение

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

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

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

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

type:  'checkbox', 

в начало, то есть:

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

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

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

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

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