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

How to trigger next/prev from inside Ajax content?

本文关键字：next prev Ajax      更新时间：2023-09-26

我有一堆子页面，我显示为一个画廊的Ajax弹出与MagnificPopup，这工作得很好，除了一个问题:在页面本身有链接到上一页/下一页。我想防止他们的行为，使他们触发弹出前/下一个按钮。我不能让它工作。

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

链接被正确选择，我可以阻止它们的默认行为。同时，调用$. magnificpop .next();或.magnificPopup.instance.next美元();手动从控制台工作得很好，使MagnificPopup转到下一个元素，但单击链接只会导致弹出关闭。我做错了什么?

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

在HTML中不能区分多个相同的 id。所有浏览器只能看到第一个出现的。

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

。

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

但是您需要确保新的选择器a)不使用id, b)足够特定以找到元素。

在内容页中添加browselinks 类会有所帮助，然后您可以有 
$('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选择器。这意味着元素只需要在单击时匹配/存在，而不是在注册事件时匹配/存在。

如果.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();  });

更新

基于我一直在看的DOCS, $.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();  
});
相关文章：