Как сделать элемент в .bindpopup доступным для внешних функций в листовке?

Question

У меня есть функция, которая передает переменные во всплывающее окно, которое пока работает. Теперь я вставил кнопку в это всплывающее окно и хочу, чтобы при нажатии на нее выполнялась какая-то функция, но объект недоступен для моей внешней функции. Как я могу переписать эту функцию, чтобы упростить доступ к отдельным элементам?

marker:

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 вместо String, чтобы вы могли управлять им как объектом

• отложить вложение вашего слушателя после открытия всплывающего окна, поэтому строка HTML преобразуется в элемент DOM на странице

• использовать делегирование событий , чтобы вместо этого прикрепить слушателя к родительскому элементу, который уже существует в DOM, но фильтрация событий для нацеливания на вашу будущую кнопку

Делегирование событий позволяет нам для присоединения одного прослушивателя событий к родительскому элементу, который будет срабатывать для всех потомков, соответствующих селектору, независимо от того, существуют ли эти потомки сейчас или будут добавлены в будущем.

С jQuery это может быть например:

* 1 030 *