Magnific-popup event binding to popup content

Question

我想將事件綁定到彈出窗口的（動態創建的）內容。我發現「elementParse」回調函數返回一個inlineElement鍵，但它只在超時後纔可用。

我該如何做到最好？

的簡化版本我的代碼：

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

Answer 1

使用change或afterChange回調。在解析元素之前觸發。