Alexander_Ku
@Alexander_Ku

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

Добрый день. Несколько форм подгружается при помощи 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-загрузке?
  • Вопрос задан
  • 381 просмотр
Решения вопроса 1
petyagrill
@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 на который он ссылается

Наведите код всех форм
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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>


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы