javascript - Marker Popup jQuery 事件在重新打开 Popup 后不再触发

Question

我有一个 Leaflet Popup 附加到一个标记，它给用户两个按钮来使用 jQuery 取消或移动到另一个页面。

这些按钮最初工作正常，除非您曾经准确地单击标记以使 Popup 消失，然后再次单击标记以使 Popup 再次出现，然后突然按钮不再起作用。

我也没有在浏览器控制台中收到任何错误消息。

可能是什么问题？

var marker;

var addPopup = function(e, marker) {
    var popup = L.popup({closeButton:false})
    .setContent('<button type="submit" class="btn btn-primary" id="ok">Ok</button><button type="submit" class="btn btn-primary" id="nok">Cancel</button>');
    marker.bindPopup(popup).openPopup();
    var Coordinates= JSON.stringify(e.latlng);
    popupAction(Coordinates, marker);
};

var popupAction= function(Coordinates, marker){
    $('#ok').on('click', function (){
      console.log('do something');  
    });
    $('#nok').on('click', function (){
        mymap.removeLayer(marker);
    });
};

mymap.on('click', function (e) {
    if (marker) {
        mymap.removeLayer(marker);
    }
    marker = new L.Marker(e.latlng).addTo(mymap);
    addPopup(e, marker);            
});

Answer 1

您的事件监听器很可能会在下一个弹出窗口打开时丢失。 Leaflet 可能会重新创建弹出内容，因此您的事件监听器不再附加到此新内容。

因此，想到的解决方法是在标记的 "popupopen" 上重新执行 popupAction 函数(将事件监听器附加到弹出按钮)。事件。

Fired when a popup bound to this layer is opened

不幸的是，这样做会产生另一个错误，因为当您的用户在 map 上的其他地方单击时您已经打开了一个带有弹出窗口的标记，您删除了该标记并创建了一个新的标记，它具有新的弹出内容但具有相同的内容按钮 ID。因此，当 jQuery 尝试附加您的监听器时，它会找到以前的按钮而不是新按钮。一个新的解决方法是使用 id 以外的东西作为选择器，这样 jQuery 也可以找到新按钮，例如类。

一个合适的解决方案就是使用 event delegation ，这很容易用 jQuery 实现:

var mymap = L.map("map");

var marker;

var addPopup = function(e, marker) {
  var popup = L.popup({
      closeButton: false
    })
    .setContent('<button type="submit" class="btn btn-primary" id="ok">Ok</button><button type="submit" class="btn btn-primary" id="nok">Cancel</button>');
  marker.bindPopup(popup).openPopup();
};

// Use event delegation, so that buttons may be removed from DOM but event listeners will persist on parent container.
// http://api.jquery.com/on/
// https://learn.jquery.com/events/event-delegation/
$('#map').on('click', '#ok', function() {
  console.log('do something');
}).on('click', '#nok', function() {
  mymap.removeLayer(marker);
});

mymap.on('click', function(e) {
  if (marker) {
    mymap.removeLayer(marker);
  }
  marker = new L.Marker(e.latlng).addTo(mymap);
  addPopup(e, marker);
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

mymap.setView([48.85, 2.35], 12);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="pr5848.js"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div id="map" style="height: 180px"></div>