Mapbox弹窗内.map-card__title的jQuery click事件失效问题排查

你的问题核心在于动态生成的DOM元素无法通过普通事件绑定触发点击，我来帮你分析原因和解决办法：

为什么点击事件没反应？ #

你用$('.map-card__title').click(...)绑定事件的时机，是在页面初始加载完成后，但.map-card__title元素是在map.on('load')的回调里，通过setHTML动态插入到弹窗中的——也就是说，当你执行事件绑定代码时，这些标题元素还根本不存在于DOM里，自然无法绑定成功。

两种可行的解决方案 #

方案1：使用事件委托（推荐） #

利用事件冒泡机制，把点击事件绑定到一个页面加载时就存在的父元素上（比如document或者地图容器#map-canvas），然后指定目标元素的选择器。这样不管元素是何时动态创建的，只要触发点击，事件就会冒泡到父元素并被捕获。

代码示例：

// 把事件绑定到document上，监听所有.map-card__title的点击
$(document).on('click', '.map-card__title', function() {
  const hotelTitle = $(this).text();
  alert('你点击了酒店：' + hotelTitle);
});

这种方式最简洁，尤其适合大量动态生成元素的场景。

方案2：在元素创建时直接绑定事件 #

你也可以在生成弹窗内容、或者弹窗打开的瞬间，给元素绑定事件：

方法A：在HTML字符串中添加onclick属性

修改你的Popup_Content生成代码，给标题元素加上onclick：

const Popup_Content = '<div class="map-card__wrapper">' +
  '<div class="map-card__image-container">' +
    '<div class="map-card__image" style="background: url('+item.pictures[0].url+');"></div>' +
  '</div>' +
  '<div class ="map-card__content-container ">' +
    // 这里添加onclick，直接传入酒店名称（注意转义单引号避免语法错误）
    '<div class ="map-card__title" onclick="handleHotelTitleClick(\'' + item.name.replace(/'/g, "\\'") + '\')">'+item.name +'</div>' +
    '<p class="map-card__address">'+item.address1+'</p>' +
    '<div class ="map-card__review">'+stars +'</div>' +
    '<div class ="map-card__price-container">'+__("Flygbolag")+ ": "+ accounting.formatMoney(item.sales_prices[0]) +'</div>' +
  '</div>';

然后定义对应的全局函数：

function handleHotelTitleClick(hotelName) {
  alert('点击了酒店：' + hotelName);
}

方法B：监听弹窗的open事件绑定

利用Mapbox Popup的open事件，在弹窗打开后，获取弹窗内的DOM元素并绑定事件：

$.each(json, function(i, item) {
  // ... 其他代码省略 ...
  const Popup_Content = '<div class="map-card__wrapper">' +
    // ... 你的弹窗内容HTML ...
  '</div>';

  const popup = new mapboxgl.Popup({ offset: 5 }).setHTML(Popup_Content);
  
  // 监听弹窗打开事件
  popup.on('open', function() {
    // 获取弹窗内的标题元素
    const titleElement = popup.getElement().querySelector('.map-card__title');
    // 绑定点击事件
    titleElement.addEventListener('click', function() {
      const hotelTitle = this.textContent;
      alert('点击了酒店：' + hotelTitle);
    });
  });

  let marker = new mapboxgl.Marker()
    .setLngLat(myLatlng)
    .setPopup(popup)
    .addTo(map);
});

这种方式不需要全局函数，更符合模块化的写法。

总结 #

优先选择事件委托的方案，代码量少且维护简单；如果需要更精细的控制（比如只在弹窗打开时绑定），可以选择监听Popup的open事件绑定。

内容的提问来源于stack exchange，提问作者Balance