Как обеспечить работоспособность JavaScript-обработчиков при использовании PJAX?
Есть страница view, код которой обернут в Pjax, работающая под Yii2. На страницу подключён скрипт js. Обнаружил интересную особенность js-кода: он корректно работает, но если вернуться на страницу, с которой уходил (или кликом или возвратом на предыдущую страницу), js-код перестаёт работать.
<?php Pjax::begin(); ?>
// some code
<?php Pjax::end(); ?>
<?php
$js = '$(function(){alert(123);})';
$this->registerJs($js, $this::POS_END);
?>
Поведение предсказуемое - заново строится DOM, но я не смог найти способа решить проблему повторной установки js-обработчиков, либо установки таким образом, чтобы их работоспособность сохранилась.
Прошу совета, можно ли решить эту проблему.
Ответы (2 шт):
Решением является установка обработчиков на неизменяемые в процессе перестроения DOM элементы, так называемая делегированная обработка событий:
$(document).on('click', '.clicked-element', function() {/* ... */});
В случае формы решение может выглядеть так:
$(document).on('submit', function(e) {/* ... */});
Подробности о делегированной обработке можно прочитать в документации.
По идее можно на странице использовать:
$this->registerJs("
$(document).on('ready pjax:end', function(event) {
$(window).trigger('load');
});
");