[英]jQuery popup doesn't work at the first click
我有几个不同文章的“立即购买”按钮。 当按钮具有“售罄”类时,它不应该做任何事情,否则它应该打开jQuery Magnific Popup。 这通常有用,但由于我使用事件处理程序“Click”而不是“mousedown”,因此只有在第二次单击后才会打开magnific popup。 我无法弄清楚如何解决它。 我猜它是因为初始化或其他东西,但我不明白。
我的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
}
});
});
我无法找到像常规Ajax一样发布数据的方法,所以我通过将数据附加到URL(GET请求)来解决这个问题,如果这对你有用的话。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.