3

我正在使用Magnific Popup 版本 0.8.9。

我正在通过 Ajax 将内容加载到其中，并且我对ajaxContentAdded. 此回调设置了一个事件处理程序，用于提交加载到弹出窗口中的表单，如下所示：

$('.add-item-btn').magnificPopup({ 
    type: 'ajax',
    closeOnContentClick: false,
    callbacks: {
        ajaxContentAdded: HandleItemFormSubmit
    }
});

这工作正常，表单提交处理正确。事件处理函数将其发布到服务器，服务器（在发生错误的情况下）返回包括错误消息在内的整个表单。为此，我让它用返回的表单替换弹出窗口的内容，并再次设置提交处理程序。

function HandleItemFormSubmit()
{
    var popup = this;
    // Submit form using ajax
    $('form.item-form').submit(function()
    {
        var data = $(this).serialize();
        var url = $(this).attr('action');

        $.post(url, data, function(resp)
        {
            if (resp == 'OK')
            {
                // All good, close up
                popup.close();  
            }
            else
            {
                // Show HTML from response (with errors)
                popup.closeOnContentClick = false;
                popup.content.replaceWith(resp);
                popup.updateItemHTML();
                HandleItemFormSubmit();
            }
        });

        return false;
    });
}

但是，尽管closeOnContentClick在两个不同的点设置为 false，但在替换内容后单击内容时弹出窗口会立即关闭（第一次确实有效）。

顺便说一下，弹出窗口中的内容只有一个根元素。

我希望作者或其他人可以在这里提供帮助，我不知道这里出了什么问题。

非常感谢！

4

2 回答 2

1

我找到了另一个解决方案：

$('html').on('submit', '#UR_FORM', function(e) {
    e.preventDefault();
    $.ajax({
        data: $(this).serialize(),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function(response) {
            var magnificPopup = $.magnificPopup.instance;
            magnificPopup.items[0].type = "inline";
            magnificPopup.items[0].src = response;
            magnificPopup.updateItemHTML();
        }
    });
});
于 2013-08-21T05:59:01.403 回答
0

您需要HandleItemFormSubmit为popup对象调用：

HandleItemFormSubmit.call(popup);

否则，当您以您的方式调用它时HandleItemFormSubmit();，this将被设置为window，这将无法按预期工作。

更新

在else子句中使用它：

if (resp == 'OK')
{
    popup.close();  
}
else
{
    // Show HTML from response (with errors)
    popup.closeOnContentClick = false;
    popup.content.replaceWith(resp);
    popup.updateItemHTML();
    HandleItemFormSubmit.call(popup);
}
于 2013-06-22T12:44:30.077 回答