jQuery popup doesn't work at the first click

Question

I have several "Purchase Now" buttons of different articles. When the button has the class "sold-out" it shouldn't do anything otherwise it should open a jQuery Magnific Popup. This works in general, but since I use the event handler "Click" instead of "mousedown" the magnific popup only opens after the second click. I can't figure out how to solve it. I guess its because an initialization or something but I don't understand it.

My HTML:

<a href="payment_options.php" class="btn-1 ajax-popup" data-region="EUW" data-packageid="1" style="display: inline-block;">Purchase Now</a>

My 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/

As you can see there, it tries only for the second click to access the ajax content (which doesn't work here ofcourse).

Answer 1

What's happening here is that the link is not yet bound to magnificPopup , it is when you click on it for the first time. So then, when you click again, it's executed.

element.magnificPopup() should not be wrapped inside a click event, as calling it is actually binding the event, not executing it.

So you need to use $.magnificPopup.open() , like so:

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

I couldn't figure out a way to post the data as with regular Ajax, so I went over that problem by appending the data to the URL (GET request), if that works for you.