ajax加载后jQuery重新初始化Magnific Popup

Question

我遇到了这个函数和我的 Ajax 分页的问题。在结果的第一页上，此弹出窗口完美运行。但是当我使用 Ajax 分页并加载下一组结果时，此功能不再起作用。我猜它需要在每次 ajax 刷新时进行初始化？如何相应地更改以下代码？

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

谢谢！！ :)

---

谢谢马克普莱维斯！我正在使用搜索和过滤器专业版。他们提供了以下 sn-p 用于使用 ajax 重新初始化您的 jquery ...如何实现我发布的第一个 sn-p 代码，如下所示？ `//检测ajax请求的开始

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

` $(document).on("sf:ajaxstart", ".searchandfilter", function(){ console.log("ajax 启动"); });

            //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 分页插件，但这里有一个使用“Infinite Ajax Scroll”的快速演示。您应该能够使其适应您正在使用的任何插件。关键是在新项目添加到 DOM 后执行的回调函数中调用 activatePopup();：

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 
    });
  }
});

更新

现在我知道您使用的是哪个插件，下面是一些更新的代码：

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 
    });
  }
});