jQuery Re инициализировать MagnificPopup после ajax загрузки

Question

Я столкнулся с проблемой с этой функцией и моей разбивкой по страницам Ajax. На первой странице результатов это всплывающее окно работает отлично. Но когда я использую разбиение на страницы Ajax и следующий набор результатов, эта функция больше не работает. Думаю, его нужно инициализировать с каждым обновлением ajax? Как изменить приведенный ниже код?

jQuery(window).load(function(){ jQuery('.open-popup-link').magnificPopup({ type:'iframe', alignTop: true, overflowY: 'scroll', midClick: true }); });

Спасибо !! :)

---

Спасибо MarkPlewis! Я использую Search & Filter Pro. Они предоставляют следующий фрагмент, который можно использовать для повторной инициализации вашего jquery с помощью ajax ... Как я могу реализовать первый фрагмент кода, который я опубликовал, со следующим? `// определяет начало из АЯКС запроса делается

https://gist.github.com/rmorse/b157004c68870dbd9fb9

` $ (документ) .он ("научная фантастика: ajaxstart", ".searchandfilter", функция() { console.log («ajax start»); });

  //detects when the ajax request has finished and the content has been updated 
      // - add scripts that apply to your results here 
      $(document).on("sf:ajaxfinish", ".searchandfilter", function(){ 
       console.log("ajax complete"); 
       //so load your lightbox or JS scripts here again 
      }); 

      //an event fired when S&F is initialised and S&F scripts have been loaded 
      $(document).on("sf:init", ".searchandfilter", function(){ 
       console.log("S&F JS initialised"); 
      }); 

`

Answer 1

Да, вы правы. Вам нужно будет повторно выполнить этот код каждый раз, когда новые элементы будут добавлены в DOM. Я не знаю, какой jQuery pagination плагин вы используете, но вот быстрая демонстрация с использованием «Infinite Ajax Scroll». Вы должны уметь адаптировать это к любому плагину, который используете. Ключ для вызова activatePopup(); внутри функции обратного вызова, которая запускается на выполнение после того, как новые элементы, которые были добавлены к DOM:

jQuery(window).load(function(){ 
    activatePopup(); 

    // Initialize the pagination plugin 
    var ias = jQuery.ias({ 
    container: '#posts', 
    item:  '.post', 
    pagination: '#pagination', 
    next:  '.next' 
    }); 

    // Pagination plugin callback function 
    ias.on('rendered', function(items) { 
    activatePopup(); 
    }); 

    function activatePopup() { 
    jQuery('.open-popup-link').magnificPopup({ 
     type:'iframe', 
     alignTop: true, 
     overflowY: 'scroll', 
     midClick: true 
    }); 
    } 
}); 

UPDATE

Теперь, когда я знаю, какой плагин вы используете, вот некоторые обновленный код:

jQuery(window).load(function(){ 
    activatePopup(); 

    // Plugin callback function 
    jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function(){ 
    activatePopup(); 
    }); 

    function activatePopup() { 
    jQuery('.open-popup-link').magnificPopup({ 
     type:'iframe', 
     alignTop: true, 
     overflowY: 'scroll', 
     midClick: true 
    }); 
    } 
});