InnerHTML / outerHTML в IE не отражает состояние флажка, кроме как в режиме quirks - PullRequest
Новая
       11

InnerHTML / outerHTML в IE не отражает состояние флажка, кроме как в режиме quirks

8 голосов
/ 23 июня 2010

В настоящее время я борюсь с ошибкой IE JavaScript / DOM (что забавно), и это действительно поставило меня в тупик.Рассматриваемый код копирует некоторые флажки в форму и должен поддерживать их проверенное состояние.Проблема в том, что IE (в частности IE8, хотя я предполагаю, что и другие) не хочет этого делать.

Я сузил саму ошибку до очень маленького контрольного примера.В основном, все работает правильно без DOCTYPE на странице, но они нарушаются, когда присутствует DOCTYPE.Я бы ожидал обратного, но кто знает, с IE.

Ниже приведены простейшие возможные тестовые случаи.Для каждого из них: откройте страницу в IE, установите флажок, затем нажмите «ТЕСТ».

Не выдает ошибку: 

<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
 document.getElementById('break').onclick = function() {
  alert(document.getElementById('broken').outerHTML);
 };
</script>

Ссылка

Выдает ошибку: 

<!DOCTYPE html>
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
 document.getElementById('break').onclick = function() {
  alert(document.getElementById('broken').outerHTML);
 };
</script>

Ссылка

Ошибка возникает на допустимых страницах (с <html>, <head>, <body>и т. д.) и находится ли ввод внутри формы.В «неработающем» случае externalHTML всегда отражает то, что присутствовало при загрузке страницы (если я проверяю ввод по умолчанию, он всегда предупреждает код с помощью CHECKED, даже если я сначала сниму флажок).То же самое происходит, если я обертываю ввод и использую innerHTML.На реальном сайте я использую метод jcluer .clone () для копирования;.clone () использует .outerHTML для внутреннего использования, и вот как я сузил это.

Мой вопрос таков: есть ли способ обойти это, если я сам вручную создаю новый HTML?И есть ли у кого-нибудь идеи, ПОЧЕМУ это происходит в первую очередь (кроме "IE SUX LOLZ")?

Ответы [ 3 ]

5 голосов
/ 23 июня 2010

Есть проблемы в целом с innerHTML и свойствами формы.Не только в IE ((хуже в FF, он НИКОГДА не будет обновлять проверенное свойство в innerHTML)) ...

Вы можете попробовать это обойти проблему в связанном вопросе: 

document.getElementById('break').onclick = function() {
  var broken = document.getElementById('broken');
  if (broken.checked) broken.setAttribute('checked','checked');
  else broken.removeAttribute('checked');
  alert(broken.outerHTML);
};
1 голос
/ 23 июня 2010

Я закончил тем, что написал оболочку для .clone () на основе ответа gnarf : 

$.fn.inputClone = function(events) {
    this.each(function() {
        this.attr('value', this.value);

        if(this.checked) this.setAttribute('checked', 'checked');
        else this.removeAttribute('checked');

        if(this.selected) this.setAttribute('selected', 'selected');
        else this.removeAttribute('selected');
    });
    return this.clone(events);
};

Это не очень общего назначения (например, это не будет работать, если вы попытаетеськлонировать элементы, содержащие входные данные), но для этого случая, похоже, все в порядке.

0 голосов
/ 23 июня 2010

Используйте эквивалентный объект DOM флажка http://www.javascriptkit.com/jsref/checkbox.shtml

Добавьте его в форму DOM, не используйте HTML и этот грязный способ.

Для ясности: 

var domCheckBox=document.getElementById('mycheckboxID');
var domForm=document.getElementById('myformID');
domForm.appendChild(domCheckBox);

Это добавит ваш флажок к вашей форме и сохранит проверенное состояние (и другие).

...