jquery - 放大的弹出窗口 - 如何引用模式中的按钮？

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

@Irvin 发布的代码是有效的，但在应用程序性能方面不是很好。我建议使用打开/关闭回调来绑定(bind)/取消绑定(bind)点击事件，例如:

$('.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');
        }
    }
});