Question

我有几个不同文章的“立即购买”按钮。当按钮具有“售罄”类时，它不应该做任何事情，否则它应该打开jQuery Magnific Popup。到目前为止有效。我的问题是，当我第一次点击主页时可以购买“立即购买”按钮时，它没有做任何事情。当我第二次点击它时，它会打开jQuery窗口。但为什么它第一次不起作用？

我的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
   });

});

Answer 1

可能是因为您在click函数中声明了弹出窗口定义。你能尝试在点击功能之外声明这个功能吗？

Answer 2

首次点击时不会打开，因为这是您将其绑定到元素的时间。

Hovewer，我们在文档中看到我们可以立即打开MagnificPopup。

// Open popup immediately. If popup is already opened - it'll just overwite the content (but old options will be kept).
// - first parameter: options object
// - second parameter (optional): index of item to open
$.magnificPopup.open({
  items: {
    src: 'someimage.jpg'
  },
  type: 'image'

  // You may add options here, they're exactly the same as for $.fn.magnificPopup call
  // Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);

http://dimsemenov.com/plugins/magnific-popup/documentation.html#options

jQuery总是阻止第一次单击的操作

2 个答案: