InnerHTML/outerHTML в IE не отражает состояние флажка кроме режима причуд
Я в настоящее время борюсь против ошибки IE JavaScript/DOM (что забава), и она действительно озадачила меня. Рассматриваемый код копирует некоторые флажки в форму и должен поддержать их проверенное состояние. Проблема, IE (конкретно IE8, хотя я предполагаю других также) не хочет делать это.
Я сузил саму ошибку к очень небольшому тестовому сценарию. В основном вещи работают правильно без DOCTYPE на странице, но они повреждаются, когда DOCTYPE присутствует. Я ожидал бы противоположное, но кто знает с IE.
Следующее является самыми простыми тестовыми сценариями. Для каждого из них: откройте страницу в IE, переключите флажок, затем нажмите "TEST".
Не производит ошибку:
Производит ошибку:
Ошибка происходит на допустимых страницах (с , , , и т.д.) и является ли вход в форме. В "поврежденном" случае, outerHTML всегда отражает то, что присутствовало на загрузке страницы (если мне проверили вход по умолчанию затем, это всегда предупреждает код с ПРОВЕРЕННЫМ, даже если я снял флажок с ним сначала). Вещи происходят тот же путь, если я переношу вход и использую innerHTML. На фактическом сайте я использую .clone jQuery () метод, чтобы сделать копирование; .clone () использует .outerHTML внутренне, и это - то, как я сузил это.
Мой вопрос - это: существует ли путь вокруг этого за исключением ручного создания нового HTML самостоятельно? И у кого-либо есть какая-либо идея, ПОЧЕМУ это происходит во-первых (кроме "IE SUX LOLZ")?
3 ответа
Есть общие проблемы с innerHTML и свойствами формы. Не только в IE ((хуже в FF, он НИКОГДА не обновит свойство checked в 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);
};
В итоге я написал обертку для .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);
};
Она не очень универсальна (например, она не будет работать, если вы попытаетесь клонировать элементы, содержащие входы), но для данного случая она, похоже, подходит.
Используйте DOM-эквивалент объекта флажка http://www.javascriptkit.com/jsref/checkbox.shtml
Добавьте его в свою форму DOM, не используйте HTML и этот грязный путь.
Для ясности:
var domCheckBox=document.getElementById('mycheckboxID');
var domForm=document.getElementById('myformID');
domForm.appendChild(domCheckBox);
Это добавляет ваш флажок в вашу форму и сохраняет отмеченное состояние (и другое).