如何从 Ajax 内容中触发 next/prev？

Question

我有一堆子页面，我将它们显示为带有 MagnificPopup 的 Ajax 弹出窗口的画廊，它工作得很好，除了一个问题：在页面本身上有指向 previous/next页。我想阻止他们的行为并让他们触发弹出窗口 previous/next 按钮。我无法让它工作。

HTML 片段：

<div class="projects">
    <a class="details" href="index.php?id=12">Details Project 1</a>
    <a class="details" href="index.php?id=13">Details Project 2</a>
    <a class="details" href="index.php?id=14">Details Project 2</a>
</div>

Javascript 片段：

$('.projects').magnificPopup({
    type: 'ajax',
    gallery: {
        enabled: true
    },
    delegate: 'a.details',
    alignTop: false,
    removalDelay: 300,
    callbacks: {
        parseAjax: function(mfpResponse) {
            mfpResponse.data = $(mfpResponse.data).find('#content');
        },
        ajaxContentAdded: function() {
            $('div.mfp-content #browselinks li.next a').click(function(event){ event.preventDefault(); $.magnificPopup.next(); });
            $('div.mfp-content #browselinks li.prev a').click(function(event){ event.preventDefault(); $.magnificPopup.prev();  });
        }
    },
    closeOnContentClick: false,
    disableOn: function() {
        return( $(window).width() >= 680) ;
    }
});

链接选择正确，我可以防止它们的默认行为。另外，调用 $.magnificPopup.next();或 $.magnificPopup.instance.next();从控制台手动工作正常并使 MagnificPopup 转到下一个元素，但单击链接只会导致 Popup 关闭。我做错了什么？

Answer 1

您在 ajaxContentAdded 中对 #browselinks 的引用表明您的内容具有具有相同 ID 值的 ID="" 个属性。当您将多个页面加载到当前 DOM 时，您将得到重复的 ID。

您无法区分 HTML 中的多个相同 ID。所有浏览器只能看到第一次出现.

您可以尝试更改它以避免 ID:

例如

$('div.mfp-content li.next a')

但您需要确保新选择器 a) 不使用 ID，并且 b) 足够具体以找到元素。

在内容页面添加 browselinks class 会有所帮助，然后您可以

$('div.mfp-content .browselinks li.next a')

因为您只想匹配 新添加到 DOM 的内容，您可以只对下一个按钮使用委托事件处理程序：

例如

$('.projects').on('click', 'div.mfp-content .browselinks li.next a').click(function(event){ event.preventDefault(); $.magnificPopup.next(); });
$('.projects').on('click', 'div.mfp-content .browselinks li.prev a').click(function(event){ event.preventDefault(); $.magnificPopup.prev();  });

$('.projects').magnificPopup({
    type: 'ajax',
    gallery: {
        enabled: true
    },
    delegate: 'a.details',
    alignTop: false,
    removalDelay: 300,
    callbacks: {
        parseAjax: function(mfpResponse) {
            mfpResponse.data = $(mfpResponse.data).find('#content');
        }
    },
    closeOnContentClick: false,
    disableOn: function() {
        return( $(window).width() >= 680) ;
    }
});

这是通过监听点击事件冒泡到一个不变的祖先，然后应用 jQuery 选择器来实现的。这意味着元素只需要在单击时 match/exist 而不是在注册事件时。

如果 .projects 不是动态加载页面的祖先，请改用 document：

例如

$(document).on('click', 'div.mfp-content .browselinks li.next a').click(function(event){ event.preventDefault(); $.magnificPopup.next(); });
$(document).on('click', 'div.mfp-content .browselinks li.prev a').click(function(event){ event.preventDefault(); $.magnificPopup.prev();  });

更新

根据我一直在查看的文档，$.magnificPopup.instance 是访问 next() 和 prev()?

等方法的更好选择

这将使代码：

$(document).on('click', 'div.mfp-content .browselinks li.next a').click(function(event){ 
    event.preventDefault(); 
    $.magnificPopup.instance.next(); 
});
$(document).on('click', 'div.mfp-content .browselinks li.prev a').click(function(event){
    event.preventDefault(); 
    $.magnificPopup.instance.prev();  
});

如何从 Ajax 内容中触发 next/prev？

How to trigger next/prev from inside Ajax content?

javascript

jquery

magnific-popup

更新