Question

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

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

谢谢!! ：）

谢谢MarkPlewis！我正在使用Search＆amp;过滤专业版。它们提供了以下片段用于使用ajax重新初始化你的jquery ...我如何实现我发布的第一段代码，具体如下？ `//检测正在发出的ajax请求的开始

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

` $（document）.on（＆＃34; sf：ajaxstart＆＃34;，＆＃34; .searchandfilter＆＃34;，function（）{ console.log（＆＃34; ajax start＆＃34;）; }）;

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

jQuery在ajax加载后重新初始化MagnificPopup

1 个答案: