传单：如何将点击事件侦听器添加到弹出窗口？答案

【问题标题】：Leaflet: how to add click event listener to popup?传单：如何将点击事件侦听器添加到弹出窗口？
【发布时间】：2015-05-12 12:00:51
【问题描述】：

我是第一次使用 Leaflet 库，我会在弹出窗口中为每个标记添加一个点击事件监听器。

这是我的代码：

for (var i = 0; i < users.length; i++) {
  var marker = L.marker([users[i].lat, users[i].lon], {icon: iconOff})
    .on('mouseover', function() { this.setIcon(iconOn); })
    .on('mouseout', function() { this.setIcon(iconOff); })
    .addTo(map);

  var myPopup = L.popup()
    .setContent("<div id='info'><p id='title'>" + users[i].title + "</p><p>" + users[i].addr + "</p></div>");

  marker.bindPopup(myPopup).openPopup();
}

我尝试将 MouseEvent 附加到弹出窗口，在将 myPopup 绑定到标记之前执行此操作：

myPopup.on('click', function() { alert("Hello"); })

但它不起作用。我还尝试添加以下 jQuery 代码（我正在使用 Bootstrap 并单击弹出窗口必须显示模式）：

  $("#info").click(function() {
    $("#userTitle").html(users[i].title).html();
    $("#userAddr").html(users[i].addr).html();
    $("#userDesc").html(users[i].desc).html();

    $("#userDetails").modal("show");
  });

这是 HTML 代码：

<?php
  $title = "Map";
  $scriptsH = array('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js', 'js/showmap.js');
  require_once('header.php');
?>
    <div class="cointainer">
        <div id="map-canvas">
        </div>
  </div>
  <div class="modal fade" id="userDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="userTitle"></h4>
      </div>
      <div class="modal-body">
          <p id="userDesc"></p>
          <p id="userAddr"></p>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Chiudi</button>
    </div>
      </div>
    </div>
  </div>
<?php
  require_once('footer.php');
?>

但它只适用于已打开弹出窗口的第一个标记。

您知道任何解决方法或正确的方法吗？

【问题讨论】：

我们能看到确切的代码吗？
我认为 Leaflet Popup 不支持任何事件
@akshay：你需要什么？
我需要查看您的 html 代码以及您已在此处发布的 javascript
@AkshayKhandelwal：我编辑了我的问题，请看一下。

标签： javascript jquery popup click leaflet

【解决方案1】：

找到最终解决方法！它有效：

这是我更新的代码：

for (var i = 0; i < users.length; i++) {
    (function (user) {
        var marker = L.marker([users[i].lat, users[i].lon], {icon: iconOff})
            .on('mouseover', function() { this.setIcon(iconOn); })
            .on('mouseout', function() { this.setIcon(iconOff); })
            .addTo(map);

        var myPopup = L.DomUtil.create('div', 'infoWindow');
        myPopup.innerHTML = "<div id='info'><p id='title'>" + users[i].title + "</p><p>" + users[i].addr + "</p></div>";

            marker.bindPopup(myPopup);

        $('#info', myPopup).on('click', function() {
            $("#userTitle").html(users[i].title).html();
            $("#userAddr").html(users[i].addr).html();
            $("#userDesc").html(users[i].desc).html();

            $("#userDetails").modal("show");
        });
    })(users[i]);
}

如您所见，我使用L.DomUtil（DOM 元素）而不是L.Popup（字符串）创建弹出窗口的内容，以创建弹出窗口的内容。此外，在我的例子中，我添加了一个匿名函数来处理来自 JSON 的数据。

我受到这个link的启发

【讨论】：

【解决方案2】：

另一种可能的方法是将事件侦听器绑定到弹出窗口的元素。

例如：

    var popup = L.popup({offset   : new L.Point(0,-24), 
                         className: 'some-class'})
                             .setLatLng(latlng)
                             .setContent(content)
                             .openOn(map);

    // can access popup._container or popup.contentNode
    $(popup._closeButton).one('click', function(e){
        //do something
    });

【讨论】：