Fancybox открывается дважды

Question

У меня есть div с вызовом fancybox

Вот его код

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

Он открывает fancybox

Вот как это выглядит после компиляции

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

Мне нужно открыть его и показать карту в div, нажав <div class="name">

Мне удалось сделать это следующим образом

$(".name").click(function(){
     $.fancybox.open($("a.fancybox"),{
      afterLoad: function(){
       lat = $(".hotel_info").data('hotel-lat');
       lng = $(".hotel_info").data('hotel-lng');
        myLatlng = new mapboxgl.LngLat(lng,lat);
        mapboxgl.accessToken = token;
        let map = new mapboxgl.Map({
           container: 'map-canvas-info',
           style: 'mapbox://styles/mapbox/streets-v9',
           center: myLatlng,
           zoom: 14
     });
     map.addControl(new mapboxgl.NavigationControl());
     let marker = new mapboxgl.Marker()
     .setLngLat(myLatlng)
     .addTo(map);
    }
    });
});

Но он дважды открывает fancybox.Как я могу это исправить?

Answer 1

Почему вы все равно создаете якорный элемент?Примерно так было бы намного проще -

HTML

<div class="name">Ibis London Thurrock M25</div>

JS

$(".name").click(function(){
  $.fancybox.open({
    src  : 'https://codepen.io/fancyapps/pen/oBgoqB.html',
    type : 'ajax',
    opts : {
      touch : false,
      afterLoad: function(){
        alert("Opened");
      }
    }
  });
});

DEMO https://codepen.io/anon/pen/BVRJdE?editors=1010