更换内容后内容请点击庄重弹出关闭 [英] Magnific popup closes on content click after replacing content

问题描述

我使用的弹出Magnific酒店0.8.9版本。

我通过Ajax加载内容到它，我用一个回调 ajaxContentAdded 。此回调设置了一个事件处理程序提交被装入弹出一个表单，像这样：

I am loading content into it via Ajax, and I use a callback for ajaxContentAdded. This callback sets up an event handler for submitting a form that was loaded into the popup, like so:

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

这工作得很好，是正确处理的形式提交。该事件处理函数其发布到服务器上，这（在错误的情况下）返回整个表格，包括错误消息。 为此，我让他跟返回的形式代替弹出窗口的内容，并设置再次提交处理程序。

This works fine, the form submit is handled correctly. The event handler function posts it to the server, which (in case of errors) returns the entire form including error messages. For this purpose I let it replace the popup's content with the returned form, and setup the submit handler again.

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，在两个不同的点，在弹出时立即被点击的内容被替换后的内容关闭（它的第一次工作）。

However, despite setting closeOnContentClick to false at two different points, the popup immediately closes when content is clicked after the content was replaced (it does work the first time).

在弹出的内容具有对了一个根元素。

The content in the popup has a single root element by the way.

我希望作者或其他人可以帮助在这里，我不知道什么是错在这里。

I hope the author or someone else can help out here, I have no idea what is wrong here.

非常感谢你！

推荐答案

我已经找到了另一种解决办法：

I've found another solution:

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

这篇关于更换内容后内容请点击庄重弹出关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！