I have a Leaflet map with leaflet-control-geocoder plugin for searching feature. I'm trying to customize popup with some javascript. The issue is, that javascript works only once on first popup opening and after each close/open popup action appears more elements in popup block and JavaScript doesn't work. I tried to use
map.on("popupclose", function (e) {})
and some how to remove/delete cretead items, but didn't work for me.
map.on("popupopen", function (e) {
let button =
"<span class='popup-btn-wrapper'><button class='popup-btn'>Check availibility</button></span>"; //define button
let section = "<div class='popup-text'> </div>";
let content = e.popup.getContent(); //get location name "London"
e.popup.setContent(content + section + button); // add button to PopUp
let wrapper = document.getElementsByClassName(
"leaflet-popup-content-wrapper"
)[0];
let targetDiv = document.getElementsByClassName("popup-text")[0];
let btnWrapper =
document.getElementsByClassName("popup-btn-wrapper")[0];
let btn = document.getElementsByClassName("popup-btn")[0];
L.DomEvent.on(btn, "click", () => {
console.log("clicked");
if (targetDiv.style.display === "none") {
targetDiv.style.display = "block";
wrapper.style.height = "150px";
btnWrapper.style.top = "70%";
} else {
targetDiv.style.display = "none";
wrapper.style.height = null;
btnWrapper.style.top = "60%";
}
});
});
//Search
L.Control.geocoder({
collapsed: true
position: "topleft"
text: "Search"}).addTo(map);