Почему при подгрузке html через .load() отваливаются js скрипты?

Question

[gassmonkey]

Некоторые разделы на сайте подгружаются через .load() из других страниц таким образом:

$(".nav-load").click(function () {
   $('.load-block').load('contact.html .load-block');
    return false;
});

При этом отваливаются js скрипты, работающие в этих блоках.
Как это исправить?

Answer 1

[teotlu]

Вы имеете в виду, что отваливаются обработчики событий (click, change и т.д.)?
Скажем, для ссылки .my-link внутри подгружаемого блока у вас назначен обработчик clickHandler.
Просто пользуйтесь делегированием, пишите не так:
$('.my-link').click(clickHandler);
А вот так:
$(document).on('click', '.my-link', clickHandler);

Comments

[gassmonkey]

Отваливается owl карусель и часть своего кода без обработчиков.

[teotlu]

gassmonkey: у вас и карусель, и ваш код завязаны на некие DOM-элементы. Когда вы подгружаете с помощью аякса новый html вместо старого, эти связи теряются. В таких случаях приходится переинициализировать скрипты заново на подгруженном контенте. Либо должен изначально использоваться модульный подход, при котором такие моменты будут автоматизированы.

Answer 2

[prodavec macdonalds]

подгружай их перед остальными скриптами

<script>
$(".nav-load").click(function () {
   $('.load-block').load('contact.html .load-block');
    return false;
});
</script>
<link rel="javascript" type="text/javascript" href="scripts.js">

Comments

[gassmonkey]

В чём смысл этого?

[teotlu]

link rel="javascript", серьёзно?

[prodavec macdonalds]

gassmonkey: иначе форма загружается уже после того как остальные скрипты отработали

[gassmonkey]

prodavec macdonalds:
И это не форма, а один из блоков, показываемых по клику. Загружаются они всегда уже после того, как скрипты отработали.

Answer 3

[targrik]

Инициализацию обработчиков надо вынести в отдельную функцию, и вызывать её при каждой догрузке контента. Чтобы не инициализировать обработчики по нескольку раз на тех же элементах, внутри функции следует работать с элементами только в текущем контейнере.

$(function() {
	prepare_container($('body'));
});
function prepare_container(c) {
	// инициализация обработчиков для элементов внутри контейнера
	// ...
	c.find(".nav-load").on('click', function () {
		var block = $('.load-block');
		block.load('contact.html .load-block', function() {
			prepare_container(block);
		});
		return false;
	});
}

Answer 4

[coderlex]

Либо крепить обработчики live-методом, т.е. к parent тэгам, либо инициализировать их заново для определенного контекста