Javascript 替换内容后单击内容时,放大弹出窗口关闭
我正在使用放大弹出窗口版本0.8.9。 我通过Ajax将内容加载到它中,并使用Javascript 替换内容后单击内容时,放大弹出窗口关闭,javascript,jquery,ajax,magnific-popup,Javascript,Jquery,Ajax,Magnific Popup,我正在使用放大弹出窗口版本0.8.9。 我通过Ajax将内容加载到它中,并使用ajaxContentAdded的回调。此回调设置一个事件处理程序,用于提交加载到弹出窗口中的表单,如下所示: $('.add-item-btn').magnificPopup({ type: 'ajax', closeOnContentClick: false, callbacks: { ajaxContentAdded: HandleItemFormSubmit }
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,但在内容被替换后单击内容时,弹出窗口会立即关闭(它第一次工作)
顺便说一下,弹出窗口中的内容只有一个根元素
我希望作者或其他人能在这里提供帮助,我不知道这里出了什么问题
多谢各位 您需要为
弹出窗口
对象调用HandleItemFormSubmit
:
HandleItemFormSubmit.call(popup);
否则,当您以这种方式调用它时,HandleItemFormSubmit()
,则此
将设置为窗口
,并且这将无法按预期工作
更新
在else子句中使用此选项:
我找到了另一个解决方案:
$('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();
}
});
});
谢谢希蒙。与此同时,我发现我在回调列表中有closeOnContentClick:false,因此我将其上移到正确的位置作为一个选项。但这没用。仅当我添加closeOnBgClick:false时,它才起作用。但是在第二次提交后,“这个”就不起作用了,所以仍然需要你的建议。你能指出我应该在哪里使用它吗。。。?
$('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();
}
});
});