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

#javascript #html #input #label

Почему-то не работают элементы 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 += '' + questions[index].answers[i]
+''
      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 не работают)


    

Ответы

Ответ 1

Согласно W3Schools, атрибуту for в качестве значения нужно передавать идентификатор
(id) элемента.

Пример того, что даже в статичном варианте это не работает с name (браузер - Opera 30.0):




Test




А вариант с id работает:




Test




Упрощенный (для теста) JS-код для проверки работоспособности динамически добавленных
.  имеют одно значение name, но разные id:



var answers = ["One", "Two", "Three"];

for (var i = 0; i < answers.length; i++) {
    var ans = document.createElement('div');
    ans.className = 'answer';
    var id = "ans" + i;
    ans.innerHTML = '';
    ans.innerHTML += '' + answers[i] + '';
    document.getElementById('question_answers').appendChild(ans);
}