Почему-то не работают элементы label, добавляемые вместе с инпутами динамически (пробовал для инпутов типа radio и checkbox). При этом итоговая разметка аналогична разметке в "статическом" варианте (когда элементы сразу прописаны в HTML), но в статическом варианте всё работает (label кликабельны, и при клике на них выбирается соответствующий инпут).
Проблема наблюдается в Opera 11, в Firefox 38, Chrome 37.
Пытался не использовать при добавлении элементов innerHTML, работая с методами DOM - не помогло.
При правке через отладчик, допустим, атрибутов name, ничего не изменяется. При этом в "статическом" варианте всё работает даже если поменять через отладчик тип элементов с checkbox на radio, и сменить имена (сделав имя единым, чтобы связать радиопереключатели в группу). Что я делаю не правильно?
P.S. Атрибут for, разумеется, указан в обоих случаях. В JS использовал свойство htmlFor во втором варианте.
UPD: исходный код
function selectQuestion(index) {
// Удаление старого содержимого...
for (var i = 0; i < questions[index].answers.length; i++) {
var ans = document.createElement('div')
ans.className = 'answer'
var str = questions[i].multiple == '1' ? 'ans' + (i+1) : 'ans'
ans.innerHTML = ''
ans.innerHTML += ''
document.getElementById('question_answers').appendChild(ans)
}
var answer = questions[index].selected
if (answer != '') {
var a = document.getElementById('question_answers').getElementsByTagName('input')
for (var i = 0; i < questions[index].answers.length; i++) {
if (answer.charAt(i) < a.length) a[parseInt(answer.charAt(i))-1].checked = true
}
}
}
UPD2: HTML код (при котором label не работают)
Ответ
Согласно W3Schools, атрибуту for в качестве значения нужно передавать идентификатор (id) элемента.
Пример того, что даже в статичном варианте это не работает с name (браузер - Opera 30.0):
А вариант с id работает:
Упрощенный (для теста) JS-код для проверки работоспособности динамически добавленных
Комментариев нет:
Отправить комментарий