How to trigger next/prev from inside Ajax content?

I have a bunch of subpages, that I display as a gallery of Ajax popups with MagnificPopup, which works nicely except for one problem: On the pages themselves there are links to the previous/next page. I want to prevent their behaviour and make them trigger the popups previous/next buttons. I can't get that to work.

HTML snippet:

<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 snippet:

$('.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) ;
    }
});

The links are selected correctly and I can prevent their default behaviour. Also, calling $.magnificPopup.next(); or $.magnificPopup.instance.next(); manually from the console works fine and makes MagnificPopup go to the next element, but clicking the links just causes the Popup to close. What am I doing wrong?

Solution

Your references to #browselinks in ajaxContentAdded indicate that your content has ID="" attributes with the same ID values. As you are loading multiple pages, into the current DOM, you will wind up with duplicate IDs.

You cannot differentiate between multiple identical IDs in HTML. All browsers can only see the first occurrence.

You could try changing it to avoid the ID:

e.g.

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

But you need to make sure the new selector a) does not use IDs and b) is specific enough to find the elements.

Adding a browselinks class to the content pages would help, then you could have

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

As you just want to match content newly added to the DOM, you could just use delegated event handlers instead for the next buttons:

e.g.

$('.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) ;
    }
});

This works by listening for the click events to bubble up, to a non-changing ancestor, then applying the jQuery selector. This means the elements only have to match/exist at click time and not when the event was registered.

if .projects is not an ancestor of the dynamically loaded pages, use document instead:

e.g.

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

Update

based on the DOCS I have been looking at, the $.magnificPopup.instance, would be a better option to access methods like next() and prev()?

Which would make the code:

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