Magnific popup - 如何引用模態內的按鈕？

Question

如果我用按鈕創建一個內聯模式...我希望能夠在點擊每個按鈕時執行特定操作。但是，我無法抓住模式中生成的這些按鈕。

有誰知道我該如何抓住這些？

$('.open-popup-link').magnificPopup({ 
    items: { 
     type: 'inline', 
     src: $('<div class="white-popup">\ 
        <h4>Are you sure you were discharged for failing a drugs test?</h4>\ 
        <p>You will not be able to change your answer once you have submitted these details.</p>\ 
        <button id="test-popup-no">No, I\'ve made a mistake</button>\ 
        <button id="test-popup-yes">Yes, I\'m sure</button>\ 
        </div>') 
    }, 
    type: 'inline', 
    midClick: true 
}); 

我想執行不同的操作時，每個按鈕被點擊取決於它的ID。

如果可以，請幫助。我一直在爲此而苦苦掙扎。只是做一個標準的jQuery選擇似乎沒有工作。

謝謝， 邁克爾。

Answer 1

您可以嘗試使用綁定事件委派一個單擊處理程序使用jQuery on：

當提供一個選擇，事件處理程序被稱爲 委派。當事件直接發生在綁定元素的 上時，不會調用處理函數，但僅對於 與選擇器匹配的後代（內部元素）。 jQuery將事件從事件目標 中的事件冒泡到處理程序所附的元素（即，最內層到最外層元素 ），併爲匹配選擇器的路徑上的任何元素運行處理程序。

代碼：

$('.open-popup-link').magnificPopup({ 
    items: { 
     type: 'inline', 
     src: $('<div class="white-popup">\ 
        <h4>Are you sure you were discharged for failing a drugs test?</h4>\ 
        <p>You will not be able to change your answer once you have submitted these details.</p>\ 
        <button id="test-popup-no">No, I\'ve made a mistake</button>\ 
        <button id="test-popup-yes">Yes, I\'m sure</button>\ 
        </div>') 
    }, 
    type: 'inline', 
    midClick: true 
}); 

$('body').on('click','#test-popup-no', function(){ 
    alert('Nope!');  
}) 

$('body').on('click','#test-popup-yes', function(){ 
    alert('Yes');  
}) 

演示：http://jsfiddle.net/IrvinDominin/A9dQ7/

Answer 2

發表@Irvin的代碼是有效的，但在應用性能方面不是很好。我建議使用打開/關閉回調綁定/解除綁定點擊事件，例如：

$('.open-popup-link').magnificPopup({ 
    items: { 
     type: 'inline', 
     src: $('<div class="white-popup">\ 
        <h4>Are you sure you were discharged for failing a drugs test?</h4>\ 
        <p>You will not be able to change your answer once you have submitted these details.</p>\ 
        <button id="test-popup-no">No, I\'ve made a mistake</button>\ 
        <button id="test-popup-yes">Yes, I\'m sure</button>\ 
        </div>') 
    }, 
    type: 'inline', 
    midClick: true, 
    callbacks: { 
     open: function() { 
      this.content.on('click.mycustomevent', '#test-popup-no', function() { 
       alert('hello world'); 
      }); 
     }, 
     close: function() { 
      this.content.off('click.mycustomevent'); 
     } 
    } 
});