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发布的代码是有效的，但在应用程序性能方面不是很好。我建议使用打开/关闭回调来绑定/取消绑定点击事件，例如：

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

Answer 2

您可以尝试使用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/

Magnific popup - 如何引用模态中的按钮？

2 个答案: