Почему скрипты не выполняются в magnific popup ajax?

Как правильно инициализировать скрипты, такие как select2, в pопапах, вызываемых через ajax с использованием magnific popup? Попытался использовать делегацию, но безуспешно.
  • 25 января 2024 г. 17:08
Ответы на вопрос 2
Magnific Popup не выполняет скрипты, получаемые через AJAX, по умолчанию. Это сделано для безопасности, чтобы предотвратить выполнение потенциально опасного кода. Однако, если вы доверяете источнику содержимого и нуждаетесь в выполнении скрипта после того как контент загружен через AJAX, вам нужно инициализировать скрипты вручную после того, как контент был загружен и добавлен в DOM.

Для инициализации скриптов внутри Magnific Popup после AJAX-загрузки используйте callback `ajaxContentAdded`, который вызывается после добавления AJAX-контента в DOM, но до его отображения пользователю.

Пример инициализации плагина Select2 в Magnific Popup после AJAX-загрузки:

```javascript
$('.popup-link').magnificPopup({
  type: 'ajax',
  // прочие настройки Magnific Popup...
  callbacks: {
    ajaxContentAdded: function() {
      // Здесь контент добавлен в DOM, но ещё не показан пользователю
      // Инициализируем Select2 или другие плагины
      this.content.find('.select2').select2();
      // Если нужно, инициализируем дополнительные скрипты
    }
  }
});
```

В примере выше, предполагается, что элемент с классом `popup-link` используется для открытия Magnific Popup с AJAX-контентом, а элементы, которые должны быть инициализированы как Select2, имеют класс `select2`.

Если вы пытались использовать делегацию, это может не сработать, поскольку нужно инициализировать плагины после загрузки контента. События завершения загрузки, как правило, не всплывают, поэтому делегировать их не получится. Вызывать инициализацию нужно именно в колбэке, предоставляемом Magnific Popup.

Также убедитесь, что ваши скрипты и библиотеки загружены на страницу и доступны на момент инициализации. Если скрипты загружаются асинхронно, убедитесь, что они загружены и выполнены до того, как вы пытаетесь инициализировать их внутри попапа.
Пиши вызов скрипта тут path-to-file.html
Похожие вопросы