Что нужно сделать, чтобы срабатывали функции и плагины jquery для динамически добавленных элементов?

Question

[Diversia]

В шаблоне сайта подключаю файл common.js, в котором много функций. Например, одна из которых:

$('.open-popup-ajax').magnificPopup({
		type:'ajax',
		midClick: true,
		mainClass: 'my-mfp-zoom-in',
		overflowY: 'scroll',
		tLoading: 'Загрузка...',
	});

По клику на a.open-popup-ajax на загруженной странице все срабатывает. Но, если динамически добавить элемент через append(), то эта функция уже не работает. Подскажите пожалуйста чайнику, как поступают в этих ситуациях? Как для динамически добавленных элементов наследовать возможность использования функций.

Answer 1

[Moses Fender]

Это инициализация плагина для элементов с селектором .open-popup-ajax. Стало быть, нужно либо в $.ajax.done() инициализировать плагин на вновь создаваемых элементах, либо попробовать делегировать документу. Но и тогда придётся толкать документ на инициализацию.

Короче, после добавления элемента, делай то же самое:

$($(<что-то там>).append(<чтототам>)).magnificPopup({
    type:'ajax',
    midClick: true,
    mainClass: 'my-mfp-zoom-in',
    overflowY: 'scroll',
    tLoading: 'Загрузка...',
  });

Comments

[Diversia]

Moses Fender, плагинов и функций в файле много. Есть ли вариант без повторной инициализации?

[Moses Fender]

Нет конечно. Как можно инициализировать плагин на элементе без его инициализации?

[Diversia]

Moses Fender, а если сделать так:

function addCallbacks(e) {
	$('.open-popup-ajax').magnificPopup({
		type:'ajax',
		midClick: true,
		removalDelay: 300,
		mainClass: 'my-mfp-zoom-in',
		overflowY: 'scroll',
		tLoading: 'Загрузка...',
		fixedBgPos: true,
	});
// и так перечислить все остальные плагины
}
	$(document).ready(function() {
		addCallbacks();
	});

А во всех ajax делать вызов функции addCallbacks()? На сколько это вариант грамотный?

[Moses Fender]

Ну, и нормально.
Можно в параметре передавать сам элемент, соответственно:

function addCallbacks(e) {
  $(e).magnificPopup({
    type:'ajax',
    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-zoom-in',
    overflowY: 'scroll',
    tLoading: 'Загрузка...',
    fixedBgPos: true,
  });
// и так перечислить все остальные плагины
}
  $(document).ready(function() {
    addCallbacks('.open-popup-ajax');
  });

  var el = $(…).append(…);
  addCallbacks(el);

Answer 2

[Александр]

Вот тут вроде то что надо:
https://github.com/dimsemenov/Magnific-Popup/issues/985

Comments

[Diversia]

Александр, спасибо, но как я указал в тексте вопроса, у меня много плагинов и разных функций. Возможно есть другой способ.

[Александр]

Diversia, Ну не меняя код вы не сделаете рабочий вариант в любом случае.

[Diversia]

Александр, в предыдущий ответ добавил свой пример. Пожалуйста, поделитесь своим мнением, на сколько данный подход является правильным?