单击传单弹出窗口内的按钮时显示执行功能的问题答案

【问题标题】：Problem to display to execute a function when clicking on a button inside a leaflet popup单击传单弹出窗口内的按钮时显示执行功能的问题
【发布时间】：2019-01-11 15:39:59
【问题描述】：

我在 JS 中遇到一个简单的问题。我有一个带有一堆标记的传单地图，当单击标记时，您会弹出一个带有一些信息和两个按钮的弹出窗口。单击按钮时，我尝试显示包含更多信息的 div。似乎当我单击它时，会显示 div 以及所有其他 div。对于循环中的所有标记，条件似乎都是正确的，因为只单击了一个按钮。

你们有什么想法吗？

$.getJSON(uri, function(data){
      for (let river in data.rivers){

          var popup = data.rivers[river].name +
              '<br/><b>Water Level :</b> ' + data.rivers[river]['water-level'] + " m3/s" +
              '<br/><b>Water Temperature :</b> ' + data.rivers[river]['temperature'] + " °C" +
              '<br/><b>Sample Time :</b> ' + data.rivers[river]['date-and-time'] +
              '<button type="button" id="more-infos" class="btn btn-primary">More infos</button>' + " " +
              '<button type="button" class="btn btn-warning">Alert me</button>';

          // The problem is here
          $("div").on('click', '#more-infos', function (e) {
            onClickMoreDetails(data.rivers[river]);
          });

          var marker = new L.marker(L.latLng(parseFloat(data.rivers[river].latitude), parseFloat(data.rivers[river].longitude)));
          marker.bindPopup(popup);
      }
  });
  
  
  function onClickMoreDetails(data){
    console.log(data);
    }

【问题讨论】：

标签： javascript jquery html leaflet

【解决方案1】：

首先，我没有在模板中使用任何可能重复的 id。

第二——为了确定你想显示哪条河流的信息，我在更多信息按钮上使用了数据属性data-river="'+i+'"。

毕竟在鼠标单击处理程序中从event.target 获取数据属性值并从对象映射中检索您的数据。

function onClickMoreDetails(event){
  console.log(data.rivers[event.target.dataset['river']]);
}

看看这个：https://jsfiddle.net/fqL9g6cb/

【讨论】：