Почему jquery не работает после динамической подгрузки страницы?

278

25 января 2017, 00:04

Собственно следующая проблема есть jquery код:

$(document).on("ready", function() {
    $('input[advancedtype="searchselect"]').after('<div class="drophelp">TEST</div>');
}
$( '#content' ).load( "form.html"); }
//form.html
<input type='text' advancedtype='searchselect'>

Собственно DOM поменялся и TEST не добавляется после подгрузки, как этот момент обойти? кто сталкивался?

Есть какие-то быстрые решения?

Answer 1

Суть в том, что функции применяемые к DOM после обновления не действительны, так как обновляются все элементы и старые события к ним стираются. Одно из решений - это после каждой загрузки "form.html" снова запускать все функции заново.

Как это сделать? Есть одно лёгкое решение: записать весь нужный код в отдельную функцию и каждый раз её вызывать. Пример:

function func() { 
  $('.button0').click(function() { 
    alert('Нажалось'); 
  }); 
}; 
$(function() { 
  func(); 
  $('.button1').click(function() { 
    $('.but').html('<button class="button0">Обновленная кнопка</button>'); 
    func(); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p class="but"><button class="button0">Нажми на меня</button></p> 
<button class="button1">Обновить</button>

Но вообще для событий нажатия, наведения можно использовать глобальные события, но в вашем случае это не уместно. Пример:

$(function() { 
  $(document).on('click', '.button0', function() { 
    alert('Нажалось'); 
  }); 
  $('.button1').click(function() { 
    $('.but').html('<button class="button0">Обновленная кнопка</button>'); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p class="but"><button class="button0">Нажми на меня</button></p> 
<button class="button1">Обновить</button>

Answer 2

Проверяем если контент изменился только тогда добовляем элемент

$("body").on('DOMSubtreeModified', "#content", function() {
   $('input[advancedtype="searchselect"]').after('<div class="drophelp">TEST</div>');
 });