Страницы

Поиск по вопросам

пятница, 16 ноября 2018 г.

Не работают label при динамическом добавлении input?

Почему-то не работают элементы 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-код для проверки работоспособности динамически добавленных


Комментариев нет:

Отправить комментарий