Using JQuery ON with Plugins for Dynamic Elements

Question

I am trying to use a JQuery modal plugin called Magnific Popup to load AJAX content in to a modal. That said, this question applies to really any plugin that can bind to an element(s).

How do I bind plugins to dynamic elements? I have tried the following basic code that I found in response to another question, without any luck. And I've tried it both inside document.ready and outside.

$(document).on('click', '.pix', function(){
    $(this).magnificPopup({
        type: 'ajax',
        alignTop: true,
        overflowY: 'scroll'
    });
});

Just using $('.pix').magnificPopup works on existing elements.

EDIT: I see my issue in the code above, I am binding the event on the click... but I need to bind the modal event on element load. But how?

Answer 1

try livequery plugin

https://plugins.jquery.com/livequery/

usage

$(".pix").livequery(function() {
    $(this).magnificPopup({
        type: 'ajax',
        alignTop: true,
        overflowY: 'scroll'
    });
});