Question

我有几个＆＃34;立即购买＆＃34;不同文章的按钮。当按钮有类＆＃34;售罄＆＃34;它不应该做任何事情，否则它应该打开一个jQuery Magnific Popup。这一般起作用，但因为我使用了事件处理程序＆＃34; Click＆＃34;而不是＆＃34; mousedown＆＃34;只有在第二次点击后才会打开。我无法弄清楚如何解决它。我猜它是因为初始化或其他什么，但我不理解它。

我的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内容（这里的内容不起作用）。

Answer 1

这里发生的是链接尚未绑定到 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请求）来解决这个问题，如果这对您有效。

jQuery popup在第一次点击时不起作用

1 个答案:

JS Fiddle Demo