Кнопка не запускает функцию во всплывающем окне API, машина маршрутизации Leaflet

Question

function addPopup(features, layer) {
        let popupContent = `<p>${features.properties.NAAM}<br>
   ${features.properties.TYPE}<br>
   ${features.properties.OMSCHRIJVING}<br>
   ${features.properties.POSTCODE} ${features.properties.DISTRICT}<br>
    <button type="button" id="btn" >Breng mij naar hier.</button> </p>`
        layer.bindPopup(popupContent);
    }

var routeControl = L.Routing.control({
        waypoints: [
            L.latLng(location.coords.latitude, location.coords.longitude),
            L.latLng(51.2194475, 4.4024643)
        ],
        routeWhileDraggin: true,
        geocoder: L.Control.Geocoder.nominatim()
    }).addTo(mymap);


document.getElementById("btn").addEventListener('click', function(){
        routeControl.spliceWaypoints(routeControl.getWaypoints().length - 1, 1, e.latlng);
        mymap.closePopup();
    });

Я делаю всплывающее окно с информацией, которую я получаю из API, под информацией, которую я имею кнопку. Я ожидал, что когда я нажму кнопку, моя функция сработает, и моя путевая точка на карте изменится. Насколько я понимаю, проблема в том, что я не могу удержать кнопку с id = btn для выполнения моей функции.

Есть ли способ заставить ее работать?

Answer 1

Ваша кнопка не загружается в DOM, когда вы запускаете прослушиватель кликов.

Вы должны установить список щелчков после открытия всплывающего окна.

function addPopup(features, layer) {
        let popupContent = `<p>${features.properties.NAAM}<br>
   ${features.properties.TYPE}<br>
   ${features.properties.OMSCHRIJVING}<br>
   ${features.properties.POSTCODE} ${features.properties.DISTRICT}<br>
    <button type="button" id="btn" >Breng mij naar hier.</button> </p>`
        layer.bindPopup(popupContent); 
        layer.on('popupopen',function(e){
           document.getElementById("btn").addEventListener('click', function(){
              routeControl.spliceWaypoints(routeControl.getWaypoints().length - 1, 1, e.popup._source.getLatLng());
              mymap.closePopup();
           });
        }
    }