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

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

1 голос
/ 27 февраля 2011

Я хотел бы получить обновленную 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?

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

РЕДАКТИРОВАТЬ: Извините.Я допустил некоторые ошибки в своем вопросе, теперь он был переписан.

РЕДАКТИРОВАТЬ: Примеры кода были созданы, чтобы продемонстрировать мою проблему, но я допустил некоторые ошибки.И 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.Работает отлично.

1 Ответ

1 голос
/ 27 февраля 2011

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

Шаги для воспроизведения проблемы:

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

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

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

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

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

ОБНОВЛЕНО:

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

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

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

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

...