Javascript Fancybox打开两次

我用fancybox呼叫div

这是它的代码

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

---

但它会打开fancybox两次。如何修复此问题？

为什么要创建锚元素？像这样的事情会简单得多-

HTML

演示

---

请创建一个。我不能，因为其中有ruby语法View@ChrisGYes您可以使用固定的示例数据。这是关于fancybox打开两次，而不是地图数据。这是它，但在小提琴所有，好的@ChrisGAlright，复制失败。我不确定我们现在能做什么。

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

$(".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);
    }
    });
});

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

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