Как правильно подключать скрипты для AJAX контента?

Question

[Yevhenii K]

Добрый день!
Как правильно подключать скрипты, если контент отдается аяксом?
Есть файл шаблона index.tpl где подключаются скрипты, находится шапка и футрер. Страница категории состоит из index.tpl и products.tpl(контент).
Проблема в том, что если отфильтровать товары через ajax фильтр или пройти через ajax пагинацию, то скрипты подключенные в index.tpl перестают работать с контентом выведеным аяксом.
Как правильно подключать скрипты, что бы не было таких проблем? Сейчас на уме только подключить его прямо в products.tpl, но будет ли верным такой вариант, может есть другие способы?

js который не работает после аякса

$('.product-title').textTailor({
    fit: false,
    lineHeight: 1.25,
});

<script type="text/javascript">
    	$('select[name=variant]').on('change', function(){
    		price = $(this).find('option:selected').attr('data-price');
    		compare_price = $(this).find('option:selected').attr('data-compare-price');
    		$(this).closest('form.addtocart').find('.prc-new').html(price);
    		$(this).closest('form.addtocart').find('.prc-old').html(compare_price);
                var id = $(this).find('option:selected').val();
            	window.sessionStorage.setItem('var_id',id);
          	
     		return false;
    	});
    </script>

Comments

[Алексей Уколов]

Скорее всего, у вас проблема не в подключении скриптов, а в их содержимом - вы наверняка навешиваете обработчики событий прямо на элементы, а не делегируете их и при добавлении новых элементов обработчики не ставите.

[Алексей Уколов]

Нужно, соответственно, видеть ваш код, чтобы ответить.

[Yevhenii K]

Алексей Уколов: добавил

Answer 1

[Евгений]

Если это какие-то плагины и нету возможности делегировать, то делайте инициализацию заново при получении AJAX'a:

$(document).on('ajax:done', () => {
    // init plugin
});

В остальных случаях делегируйте события:

$(document).on('change', 'select[name=variant]' () => {
    // ...
});