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>

`Fancybox` inited after you first click on your element. What do you expect? — u_mulder, Mar 28 '18 at 10:01
apply a console.log or alert on the click handler and check it triggers on first click or not — fayis003, Mar 28 '18 at 10:03
@u_mulder thank you, i didn't realized that earlier. I don't know how to mark you answer. — Atanas Grudev, Mar 28 '18 at 10:16

score 0 · Accepted Answer · answered Mar 28 '18 at 10:21

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

will it not result in an infinite loop if `.click()` again calls `.click(function`? — Abdul Hameed, Mar 28 '18 at 11:45

On click function fires only on second click

1 Answers1