我有不同文章的几个“立即购买”按钮。当按钮具有“已售罄”类时,它不应执行任何操作,否则应打开jQuery Magnific Popup。这通常可以正常工作,但是由于我使用事件处理程序“ Click”而不是“ mousedown”,因此仅在第二次单击后才打开宏弹出式窗口。我不知道如何解决。我猜这是因为初始化之类的,但是我不明白。
我的HTML:
<a href="payment_options.php" class="btn-1 ajax-popup" data-region="EUW" data-packageid="1" style="display: inline-block;">Purchase Now</a>
我的JQuery:
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true,
mainClass: 'mfp-fade'
});
$('.ajax-popup').click(function(e){
e.preventDefault();
if($(this).hasClass("sold-out")) {
return false;
}
var region = $(this).data('region');
var quantity = $(this).data('quantity');
if(typeof quantity == 'undefined') quantity = $(this).parent().find('select').val();
var packageid = $(this).data('packageid');
$(this).magnificPopup({
type: 'ajax',
ajax: {
settings: {
data : {
region : region,
quantity : quantity,
packageid : packageid,
}
}
},
closeOnContentClick: false,
closeOnBgClick: false
});
});
JSFiddle:http://jsfiddle.net/fyLgp1yx/
如您所见,它仅尝试第二次访问ajax内容(当然,此处不起作用)。
最佳答案
这里发生的是该链接尚未绑定到magnificPopup,这是您第一次单击它时。因此,当您再次单击时,它就会执行。element.magnificPopup()
不应包装在click事件中,因为调用它实际上是在绑定事件,而不是执行它。
因此,您需要使用$.magnificPopup.open()
,如下所示:
var serialize = function(obj) {
var str = [];
for(var p in obj)
if (obj.hasOwnProperty(p)) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true,
mainClass: 'mfp-fade'
});
$('.ajax-popup').click(function(e){
e.preventDefault();
if($(this).hasClass("sold-out")) {
return false;
}
var data = {
region : $(this).data('region'),
quantity : $(this).data('quantity'),
packageid : $(this).data('packageid')
};
if(typeof data.quantity == 'undefined') data.quantity = $(this).parent().find('select').val();
$.magnificPopup.open({
items:{
src:$(this).attr('href') + '?' + serialize(data),
type: 'ajax',
closeOnContentClick: false,
closeOnBgClick: false
}
});
});
JS Fiddle Demo
我无法像常规Ajax一样想出一种发布数据的方法,所以我通过将数据附加到URL(GET请求)来解决了这个问题,如果可以的话。