如何使 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);