Почему перестает работать label в ajax-загрузке?

Question

[Александр]

Добрый день. Несколько форм подгружается при помощи ajax в табах, при клике по определенному табу .

<ul>
<li><a id="ajax-form">Форма 1</a></li><!--кнопка 1 таба-->
<li><a id="ajax-form2">Форма 2</a></li><!--кнопка 2 таба-->
<li><a id="ajax-form3">Форма 3</a></li><!--кнопка 3 таба-->
<li><a id="ajax-form4">Форма 2</a></li><!--кнопка 4 таба-->
</ul>
  <div id="content"><!--контент таба 1-->
  </div>
  <div id="content2"><!--контент таба 2-->
</div>
  <div id="content3"><!--контент таба 3-->
</div>
 <div id="content4"><!--контент таба 4-->
</div>

ajax:

$('#ajax-form').click(function(e){
    e.preventDefault();
    $.ajax({
    type: "POST",
    url: 'form.html',
    cache: false,
    success: function(data) {
    $('#content').html(data);
    }
    });
.....

После клика на первую кнопку таба, подгружается первая форма, а после клика на вторую кнопку таба, подгружается вторая форма и тд... Но после того как я перехожу обратно на первый таб, то перестают работать label в форме.
Пример label в форме:

<span class="radio-btn">
       <input type="radio" id="radio25" name="dynamic_10[]" value="3">
       <label for="radio25">да</label>
</span>
<span class="radio-btn">
        <input type="radio" id="radio26" name="dynamic_10[]" value="4">
	<label for="radio26">нет</label>
</span>

Почему перестает работать label в ajax-загрузке?

Comments

[petyagrill]

а как же jsfiddle.net?

Answer 1

[petyagrill]

Вообще я бы подошел к вашему вопросу с другой стороны:
https://jsfiddle.net/54q5x90j/

<ul>
<li><a class="ajax-form" data-form="form1.html" data-content="#content">Форма 1</a></li><!--кнопка 1 таба-->
<li><a class="ajax-form" data-form="form2.html" data-content="#content2">Форма 2</a></li><!--кнопка 2 таба-->
<li><a class="ajax-form" data-form="form3.html" data-content="#content3">Форма 3</a></li><!--кнопка 3 таба-->
<li><a class="ajax-form" data-form="form4.html" data-content="#content4">Форма 2</a></li><!--кнопка 4 таба-->
</ul>
  <div id="content"><!--контент таба 1-->
  </div>
  <div id="content2"><!--контент таба 2-->
</div>
  <div id="content3"><!--контент таба 3-->
</div>
 <div id="content4"><!--контент таба 4-->
</div>

$('.ajax-form').on('click',function(e){
    e.preventDefault();
    var form = $(this).data('form');
    var content = $(this).data('content');
    $.ajax({
    	type: "POST",
   		url: form,
    	cache: false,
    	success: function(data) {
    		 $(content).html(data); 
    	},
    	error: function(data) {
    		$(content).html('data-err');
            
    	}
    });
});

Ну а label не работает скорее всего из-за того что дублируются id на который он ссылается

Наведите код всех форм

Comments

[Александр]

Вам js не работает(даже в писочнице), может где то ошибка?

[petyagrill]

Александр: Что именно не работает? в песочнице он должен выводить data-err в соответствующий div, ибо ajax возвращает error по тому что не доступен ему файл form1.html итд. Замените свой код на этот, и проследите чтобы файлы из атрибута data-form существовали

[Александр]

petyagrill: у меня путь к форме в папке filter/protokol.html на одну форму, в итоге выглядит так

<li><a class="ajax-form" data-form="filter/protokol.html" data-content="#protokol">Комната</a></li>

но где
<div id="protokol"></div>
выводится слово data. В фаербаге видно, что запрос к html идет, но не выводится.

[petyagrill]

Александр: Поправил js

[petyagrill]

Александр: там должно быть $(content).html(data); - без кавычек

[Александр]

petyagrill: да, спасибо огромное, работает!:) Дело в том, что я сегодня по этому поводу (сократить ajax код) задал на форуме javascript.ru и там никто мне не помог!) А вы прям как будто мои мысли читаете!

[petyagrill]

Александр: ну а основной вопрос решили? (Почему перестает работать label?)

[Александр]

petyagrill: и еще скорее всего перестают работать кнопки, т.к. в один из табов подгружается такая же форма как и в другом, поэтому id кнопок начинают совпадать и не работать . Надо как то во время перехода на другой таб убрать подгруженную форму из первоначально открытого. Не подскажите как?

[petyagrill]

Александр: где можно код глянуть? или вы на локалке работаете?

[Александр]

petyagrill: да локалке.

[petyagrill]

Александр: подозреваю что обработку форм вы тоже делаете с помощью js, по этому код лучше бы предоставить.
Вы же обработку формы вешаете на кнопку? а нужно немного не так делать. Давайте код на https://jsfiddle.net/ и там разберемся

[Александр]

petyagrill: вы меня натолкнули на мысль повторяющихся id. В итоге в событие, которое переключает табы я добавил событие удаление содержимого подгруженной ранее формы в скрываемый таб. Ко всем id="content. 1..2 ... 4" добавил одинаковый класс, который стал селектором для очистки.
$(".filter-off").html('');
спасибо вам еще раз.

Answer 2

[Scribblex]

Скорее всего потому, что каждый раз клик по табу вызывает с сервера новую разметку, а id должен быть уникальным. Если Вы хотите решить проблему быстро, предлагаю такю вот разметку:

<span class="radio-btn">
       <label><input type="radio" name="dynamic_10[]" value="3"> да</label>
</span>
<span class="radio-btn">
       <label><input type="radio" name="dynamic_10[]" value="4"> нет</label>
</span>

В целом, скажу, что не зная контекста задачи, мне трудно предложить решение, но идея гонять туда-сюда разметку мне совсем не нравится