CODEWITHSUNDEEP
magnific-popup
publicJorn
publicJorn

Reputation: 2494

Magnific-popup event binding to popup content

I want to bind events to the (dynamically created) content of the popup. I found out that the "elementParse" callback returns an inlineElement key, but it is only available after a timeout..

How can I best do this?

A simplified version of my code:

HTML:

<div id="dynamic-content-container">
    <!-- content in here is dynamically loaded, so can't do $('button').magnificPopup(); -->
    <button>open lightbox</button>
</div>

<script type="text/template" id="template">
    <p>some content</p>
    <button class="confirm">bind event on me!</button>
</script>

JS:

// using event delegation to open lightbox
$('#dynamic-content-container').on('click', 'button', openLightbox);

function openLightbox() {
    var dialogHtml = $('#template').text();
    // some template parsing stuff happens here...
    dialogHtml = '<div>'+ dialogHtml +'</div>';

    $.magnificPopup.open({
        items: {
            src: dialogHtml,
            type: 'inline'
        },
        callbacks: {
            elementParse: function(item){
                // I want to do something like:
                // item.inlineElement.on('click', '.confirm', doConfirm);

                console.log(item);
                console.log(item.inlineElement); // doesn't exist yet
                setTimeout(function(){
                    console.log(item.inlineElement); // this works, but ain't pretty
                }, 1000);
            }
        }
    });
}

Upvotes: 2

Views: 9475

Answers (1)

Dmytro Semenov
Dmytro Semenov

Reputation: 4616

Use change or afterChange callback. elementParse fires before the element is parsed.

Upvotes: 3

Related Questions