Get fancybox call from poup ajax

I have popupajax in my view that opens fancybox

Here is code of it

 <div class="name"><%= popup_ajax hotel.name, hotel_info_path(hotel) %></div>

And on compilation it looks like this

<div class="name"><a class=" fancybox" data-type="ajax" data-src="/hotel_info/72721" data-options="{&quot;touch&quot;:false,&quot;baseClass&quot;:null}" href="javascript:;">Ibis London Thurrock M25</a></div>

I need to catch event, when this fancybox opened via JS to post map in div, that inside fancybox content

I was trying to do it like this for example

 $(".name").click(function(){
    $("a.fancybox").fancybox({
      beforeShow: function(){
        alert("Here");
      }
    });
  })

But I didn't het an alert.

How I can do this?

Solution

Your code works perfectly fine (with small tweak), see this demo - https://codepen.io/anon/pen/MXmyZq?editors=1010

It is very important to understand what $(selector).fancybox() does - by executing .fancybox() method you are attaching click event (to selected elements) that starts fancybox (see docs - https://fancyapps.com/fancybox/3/docs/#usage )

Basically - you have created click event that attaches another click event handler to your element. Just remove that unnecessary click event and that's all.

But, if you really want to start fancybox from within your click handler, then you have to use $.fancybox.open() method for that (see https://fancyapps.com/fancybox/3/docs/#api for samples).