On click function fires only on second click

Question

I find few answers on this theme, but none of them helped me.

My on click fires on second click - where is the problem?

<script type="text/javascript">
$(function () {
   $("#back-in-stock-subscribe").click(function () {
      var sku = document.getElementById('back-in-stock-sku-to-get').textContent;
      var action = '@Url.RouteUrl("BackInStockSubscribePopup", new { productSku = "sku" })';
      action = action.replace("sku", sku);

      $("#back-in-stock-subscribe").fancybox({
           'href': action,
           'transitionIn': 'none',
           'width': 500,
           'height': 200,
           'type': 'iframe',
           'centerOnScroll': true
      });
   });
});
</script>

Answer 1

I believe your code on click initializes the fancy box but you need to call the click event on the fancybox itself to launch it.

Try adding .click() at the end:

<script type="text/javascript">
$(function () {
   $("#back-in-stock-subscribe").click(function () {
      var sku = document.getElementById('back-in-stock-sku-to-get').textContent;
      var action = '@Url.RouteUrl("BackInStockSubscribePopup", new { productSku = "sku" })';
      action = action.replace("sku", sku);

      $("#back-in-stock-subscribe").fancybox({
           'href': action,
           'transitionIn': 'none',
           'width': 500,
           'height': 200,
           'type': 'iframe',
           'centerOnScroll': true
      }).click();
   });
});
</script>

Looking at this :

Open fancybox from function