如何使 leaflet 中的外部函数可以访问 in.bindpopup 中的元素？

Question

我有一个 function 将变量提供给一个弹出窗口，到目前为止它正在工作。 现在我在此弹出窗口中插入了一个按钮，并希望在单击此按钮时运行一些 function，但是我的外部 function 无法访问 object。 如何重写此 function，以更轻松地访问单个元素？

标记：

var marker      = L.marker([data[i].lat, data[i].lng], {icon: greenIcon}).addTo(map);
marker.bindPopup(id + "<br>" + species + "<br>" + diameter + "<br>" + quality + "<br>" + damage + "<br>" + notes + "<br>" + "<br>" +
'<input type="submit" id = "delete" name="action" data-value = " + id + " value="Delete" method = "post"/>');
        

function：

<script type="text/javascript">
    $(function(){
        $('#delete').click(function(d){
            
        alert("deleted")
    });
});
</script>

Answer 1

打开 Popup 后，您必须添加侦听器：

marker.on('popupopen',function(e){
    $('#delete').click(function(d){ 
        alert("deleted")
    });
}

Answer 2

正如您所知道的，您在代码中提供给bindPopup的只是一个 HTML 字符串，您不能直接使用它来附加事件侦听器。

您有几种可能的解决方案：

• 构建一个 HTML 元素以传递给bindPopup而不是字符串，以便您可以将其作为 object 进行操作

• 将侦听器的附件推迟到弹出窗口打开后，因此 HTML 字符串将转换为页面上的 DOM 元素

• 使用事件委托将您的侦听器附加到父元素，该元素已存在于 DOM 中，但过滤事件以定位您的未来按钮

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

使用 jQuery 这可能是这样的：

$("body").on("click", "#delete", myListenerFunction);