Magnific-popup: How to bind to dynamic content?

[jglesner]

Hello! I love Magnific, but I've run into a problem and would greatly appreciate your insights. Not sure if my issue is related to how I'm using Magnific ... but thought it worth asking.

Background: I'm populating a div with id='results' dynamically via JS. In order to bind any events to links/buttons deep within this dynamic content, I typically use this construct within my jquery ready block:

$('#results').on("click", "<<id or class>>", function(e) { }

I have some thumbnail images which I would like to magnify. These images are wrapped in an anchor:

<a href='' title='' data-source='' class='magnify'><img src=''/></a>

I've tried a couple ways to bind the event without using the .on('click') construct above, such as:

$('#results .magnify').magnificPopup()  

... but that didn't work.

So, then I tried it using the on('click'). When I do that, it finally bound the event, but it takes two mouse clicks on a thumbnail to magnify the image. Curious if perhaps using magnificPopup in this way is causing my issue:

        $('#results').on("click", ".magnify", function(e) {

            e.preventDefault();

            $(this).magnificPopup({
                type: 'image',
                closeOnContentClick: true,
                closeBtnInside: true,
                mainClass: 'mfp-with-zoom mfp-img-mobile',
                image: {
                    verticalFit: true,
                    titleSrc: function() {
                        return $(this).attr('title') + ' &middot; <a class="image-source-link" href="' + $(this).attr('data-source')+'" target="_blank">image source</a>';
                    }
                },
                zoom: {
                    enabled: true
                }
            });
        }); 

Thanks in advance!

[jglesner]

Learned (via two topics on stackOverflow) that using the exact function in my first post, but chaining .magnificPopup('open'); to the end resolves this problem:

            $(this).magnificPopup({
                type: 'image',
                closeOnContentClick: true,
                closeBtnInside: true,
                mainClass: 'mfp-with-zoom mfp-img-mobile',
                image: {
                    verticalFit: true,
                    titleSrc: function(item) {
return item.el.attr('data-title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
                    }
                },
                zoom: {
                    enabled: true
                }
            }).magnificPopup('open');

This issue can be closed.

[RM1234567890]

This helped me so much! Is it possible to also have the Magnific-Popup gallery working with the dynamically loaded content?

[theseus905]

You my sir, are one true Legend, and ought to be praised by the highest orders of web developers.