Пропадают обработчики события click при частичной перезагрузки блоков, как поправить?

Question

[Элизабет Лоуренс]

Всем добрый день, спасибо, что заглянули!
Три дня бьюсь над задачкой, никак не могу решить, прошу помощи. Прошу прощения, что много текста, просто я не знаю, что здесь существенно, а что нет, поэтому написала все свои наблюдения. У меня на странице оформления заказа подключается внешний скрипт для выбора пункта самовывоза. Для его подключения указывается ссылка на скрипт, а в теле документа вот такая конструкция:

<div id="shiptor_widget" class="_shiptor_widget"></div>

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

<a href="#" class="pickpvz" data-role="shiptor_widget_show">Выбрать ПВЗ</a>

Так вот беда в чем: после загрузки страницы при клике на эту ссылку, виджет открывается, в браузере в Event Listeners я вижу, что на click по этой ссылке висит обработчик из подключенного внешнего скрипта виджета:
click -> a.pickpvz ( https://widget.shiptor.ru/embed/widget-pvz.js ), а как только я сменяю способ оплаты или доставки происходит частичная перезагрузка блоков (я не знаю как это реализовано, у меня модуль simple для opencart это делает) и после этой частичной перезагрузки, с вышеуказанной ссылки слетает этот обработчик на click и ссылка больше не открывает виджет ровно до тех пор, пока не перезагрузится вся страница. Так как я вообще ничего в этом не понимаю, то попробовала в момент частичной перезагрузки блоков заново подключать внешний скрипт, заново проставлять тег a и div id="shiptor_widget" в надежде, что этот обработчик будет снова навешиваться, но этого не происходит. Прошу подсказки, почему так происходит и как можно исправить?

Answer 1

[ThunderCat]

есть подозрение что с подгрузкой блоков происходит "переподгрузка" вашего лика на котором висит евент клика. Как вариант решения - найти место где вешается листенер и перевесить его на документ, с проверкой таргет элемента. На jquery примерно так:

$(document).on('click','.pickpvz',function(e){
e.preventDefault();
// код обработчика
});

Answer 2

[Exploding]

Используйте делегирование: найдите тот участок кода, где обработчик события click устанавливается на ссылку и измените таким образом, чтобы он "навешивался" на "родителя", который не перезагружается.
В общем почитайте о делегировании событий и сразу станет все понятно.

Comments

[Элизабет Лоуренс]

Благодарю за ответ. Это возможно сделать, если данный код где навешивается обработчик события находится во внешнем подключенном файле от сервиса, предоставляющего данный виджет?

[Exploding]

Элизабет Лоуренс, Как это внешний код сервиса будет вешать обработчик на ваш элемент? Оно то возможно, но очень маловероятно... Наверно.
Как правило, такие сервисы выдают и сам элемент и нужный js со всеми обработчиками. Либо сам js сервиса генерит элемент (чаще всего именно так).
Но это все "пальцем в небо" без конкретного примера.

Answer 3

[Александр Алексеев]

onclick="" в загружаемых блоках - самый простой выход