innerHTML игнорирует изменения DOM для флажка и радио-ввода в IE8

Я хотел бы получить обновленную строку html DOM для элементов формы (например, <input type="text">, <input type="radio">, <input type="radio">, <textarea>).

Я нашел этот вопрос и пытаюсь использовать плагин formhtml, написанный gnarf:

jQuery html() в Firefox (использует .innerHTML) игнорирует изменения DOM

Проблема в том, что он работает в Firefox и Chrome, но только частично в IE8 (я не тестировал другие версии).

Если вы откроете следующую страницу в IE8, вы увидите текстовое поле, несколько флажков и переключателей. Попробуйте ввести какой-нибудь текст и установите флажки и радио.

http://jsfiddle.net/e9j6j/1/

Затем нажмите на кнопку «Нажмите».

Вы можете видеть, что независимо от того, получаю ли я строку html через свойство innerHTML собственного объекта DOM или с помощью функции formhtml() плагина. Возвращаемый html отражает только изменения в атрибуте value текстового поля, вы никогда не увидите атрибуты checked="checked" в <input type="radio"> и <input type="checkbox">, даже если вы уже проверили их перед нажатием кнопки.

Почему это происходит и как заставить это работать в IE?

Заранее спасибо.

EDIT: извините. Я сделал несколько ошибок в своем вопросе, теперь он был переписан.

EDIT: Образцы кода были созданы для демонстрации моей проблемы, но я допустил несколько ошибок. И IE7, и IE8 дают ожидаемые результаты (я также снова провел тесты).

В моих исходных кодах я не использую функцию formhtml() напрямую для $('#div1'), а скорее клонирую ее перед использованием formhtml() следующим образом:

alert($('#div1').clone().formhtml());

И в IE8 с jQuery 1.3.2 возвращаемый html не отражает проверенные состояния этих флажков и радио, я никогда не думал, что это будет проблема функции clone(), поэтому, когда я создавал примеры кодов, я не клонировал их и поэтому фактическая проблема не была продемонстрирована.

Обновленные образцы кода находятся здесь (версия jQuery изменена на 1.3.2):

http://jsfiddle.net/e9j6j/4/

Это может показать проблему функции clone() в IE8 (у меня сейчас нет IE8, я проверю его, когда буду дома, сообщу позже).

ИЗМЕНИТЬ:

Я только что сделал тест. Это действительно проблема функции clone() в jQuery 1.3.2 в IE8. Не удается скопировать состояния флажков и радио. После изменения на jQuery 1.5.1. Это работает отлично.


javascript html jquery dom innerhtml
person bobo    schedule 27.02.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я попробовал тестовый пример на http://jsfiddle.net/e9j6j/1/ в IE8 и IE7. и они работали на меня.

Действия для воспроизведения проблемы:

  1. Загрузите http://jsfiddle.net/e9j6j/1/ в браузере IE.
  2. Введите текст в текстовое поле, установите первый переключатель, установите первый флажок.
  3. Нажмите кнопку «Щелкнуть».

Ожидаемый результат:

Оба предупреждения показывают значение в текстовом поле и состояние «отмечено» на первом радио и первом флажке.

Фактический результат:

Как и ожидалось. Однако имейте в виду, что представление DOM в IE означает, что checked="checked" на самом деле сообщается как CHECKED, но это правильно.

ОБНОВЛЕНО:

Добавлен тест, чтобы убедиться, что проверенное состояние может быть скопировано на новый узел dom:

$('#btn1').click(function() {
    alert($('#div1').formhtml());
    alert(document.getElementById('div1').innerHTML);

    var div1 = $('#div1');
    div1.clone().insertAfter(div1);
});

Это создает другой набор полей, которые сохраняют исходное состояние ввода. Просмотреть на jsfiddle.

person johnhunter    schedule 27.02.2011
comment
Большое спасибо за ваш ответ. Теперь я могу подтвердить, что он показывает ожидаемый результат как в IE7, так и в IE8. Проблема, вероятно, заключается не в функции formhtml(), а в функции clone(), которой не было в моих примерах кода. Извини за это. - person bobo; 28.02.2011
comment
@bobo рад, что это помогло. Имейте в виду, что клон не делает здесь ничего нового — это просто еще один способ подтвердить, что formhtml работает. - person johnhunter; 28.02.2011