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函数（将弹出按钮上的事件侦听器附加）。

打开绑定到此图层的弹出窗口时触发

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

重新打开Popup后，Marker Popup jQuery事件不再激活

1 个答案: