Leaflet JS динамически генерируемый всплывающий HTML, загружается частично, если ранее открытое всплывающее окно, если не правильно закрыто

Question

Фон: я использую Leaflet JS для создания карты с маркерами.Маркеры генерируются путем итерации по строкам в переменной json (var tabledata) с указанием местоположения, имен и т. Д. HTML-содержимое всплывающих окон маркеров динамически генерируется на основе данных json.Когда всплывающее окно открывается, я использую функцию jquery для проверки HTML в динамически сгенерированном всплывающем контенте.Маркеры сохраняются в массиве и из массива, они добавляются в слой карты (mapview.addLayer (venuemarkers [i]);).Во всплывающем окне есть кнопка, которая открывает модальный режим, и функция, которая заполняет модальный режим данными из связанного файла json табличных данных.

Что работает: большинство функций работает нормально.Если я в данный момент нажимаю на всплывающее окно, он показывает желаемые результаты.Если я нажимаю на кнопку во всплывающем окне, она отображает модальные данные с правильно загруженными данными, выполненными функцией.Если я закрываю модальное окно с правым верхним закрытием X и открываю новое всплывающее окно, оно по-прежнему ведет себя нормально.

Что не работает: Если я открываю первое всплывающее окно, оно показывает правильный всплывающий контент.Если я непосредственно нажимаю на второй маркер, не закрывая первый, он загружает правильное всплывающее содержимое, но если я нажимаю кнопку «больше информации» во всплывающем окне, он открывает модальный режим с данными из ранее открытого всплывающего окна.Я уже реализовал «хак» (mapview.closePopup ();), который решает эту проблему при нажатии кнопки «Подробнее».Тогда текущее открытое всплывающее окно будет закрыто в фоновом режиме при открытии модального окна.При закрытии модального ряда и выборе следующего маркера все работает нормально.

Так странно, что сами всплывающие окна всегда показывают правильный контент, но кнопка «Подробнее» помещает старые данные в функцию (getVenueDetails (tabledata ["+ i +"]); ")даже если этот HTML-код генерируется в той же переменной.

Требуемое решение: знает ли кто-нибудь, как «имитировать» закрытие предыдущего всплывающего окна с верхним правым X при нажатии на следующий маркер?закрывается при нажатии на следующий маркер, но это не очищает данные.) Или есть другой обходной путь или чистое решение?

Демонстрационная версия:

-Перейти к: https://besttime.app/

-Блокировать запрос «Местоположение» для получения демонстрационных данных

-Нажмите ?️ (значок), чтобы открыть карту с маркерами

function mapViewMode() {

        var mapview = L.map('mapidmapview').setView([lat, lon], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(mapview);

        //Create custom map marker
        var mapIcon = L.divIcon({
            className: 'map-marker',
            iconSize: [30, 30], 
            iconAnchor: [15, 15],
            popupAnchor: [0, -5],
            html:'<div style="font-size:30px;font-style: normal;">?</div>'
        });

        var redIcon = new L.Icon({
            iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
          });

          var yourLocationIcon = new L.Icon({
            iconUrl: 'https://camo.githubusercontent.com/4b5a493a8346e986854a13cb65c74f499ae0ec52/687474703a2f2f7777772e323730746f77696e2e636f6d2f656c65637465642d6f6666696369616c732f696d67732f67656f6c6f636174652e706e67',
            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
            iconSize: [41, 41],
            iconAnchor: [20, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
          });

        //For loop to display all found venues on the map
        for (i = 0; i < tabledata.length; i++) {

            var venuemarker = L.marker([tabledata[i].coordinates_lat, tabledata[i].coordinates_lng], {icon:redIcon});

            //Dynamically generate HTML for popup content based on nr in tabledata
            var popup_content = '<h6>' + tabledata[i].name + '</h6>' +
                                '<button id="venueInfoBtn" class="btn btn-primary-menu btn-round speciallink" style="background: #fc845d;margin-right: 0px;" >' +
                                    '<i style="font-size:17px;font-style: normal;">More info</i>' +       
                                '</button>' +
                                '<scr'+'ipt> $(".speciallink").on("click", function(){' +
                                    "$('#myModalVenueDetails').modal('show');" +
                                    //close popup on modal load. Hack to prevent previous old marker data opening the previously opened marker
                                    "mapview.closePopup();" +
                                " getVenueDetails(tabledata[" +i + "]);"+
                                " console.log(getVenueDetails(tabledata[" +i + "]));" +
                                ' });</scr'+'ipt>';

            venuemarker.bindPopup(popup_content, {closeOnClick: false, autoClose: false});

            //Add to venuemarkers array
            venuemarkers.push(venuemarker);
            // Add array element to mapview
            mapview.addLayer(venuemarkers[i]);

        }

        mapview.on('popupopen', function(){
            console.log("Opening mapviewmode venue popup"); 
            //clear previous values

            var cont = document.getElementsByClassName('leaflet-popup-content')[0];
            console.log(cont);
            var lst = cont.getElementsByTagName('script');
            console.log(lst);        
            for (var i=0; i<lst.length;i++) {
                console.log(lst[i].innerText);
                eval(lst[i].innerText);
            }
        });

        // Add user location/ search area radius
        var pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'red'});

        var userlocationmarker = new L.marker([lat, lon], {icon:pulsingIcon});
        mapview.addLayer(userlocationmarker);
        userlocationmarker.bindPopup("Your location");
        userlocationmarker.bindTooltip("Your location",{permanent:true, direction:'right', offset:[20,0],opacity:0.6});

        //Solves issue when leaflet js map is loaded without being completely visable. After timeout it corrects it
        setTimeout(function() {
            mapview.invalidateSize();
        }, 200);


    }