无法关闭将EventListener附加到关闭按钮上的动态创建的弹出窗口?

时间:2019-05-27 11:10:47

标签: popup leaflet

我在Leaflet地图上的固定位置创建了一个自定义弹出窗口。单击一个标记时,我可以关闭弹出窗口,并通过单击另一个标记来打开另一个弹出窗口。但是,当我没有通过单击关闭按钮来关闭弹出窗口,而是单击另一个标记时,弹出内容发生了变化,但是我不再能够通过单击关闭按钮来关闭弹出窗口,它被卡住了。该如何解决?

// Custom marker

var redFlag = L.icon({
   iconUrl: 'images/mapmarker2.png',
   iconSize: [34, 34],
   iconAnchor: [17,34]
});

//geoJSON data, stored in 'art' variable  

const myLayer = L.geoJSON(art, {
    pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {icon: redFlag});

},
onEachFeature: function ( feature, layer) {
    layer.on('click', function(e){

        var getWrap = document.getElementById('mapid');
        var wrap = getWrap.appendChild(document.createElement('div'));
        wrap.className = 'wrapper';
        wrap.style.backgroundColor = '#fff';
        wrap.innerHTML =  
        `<div class="close">X</div>`+ 
        `<div class="popUpContent" style="background-color:#e8f4ff">` +
        `<div class='pic'><img src = 
         "images/${feature.properties.image}"></div>`+ 
        `<div class="puName"><span 
         class="puName">${feature.properties.name}</span><br>`+
        `<span class="puTitle">"${feature.properties.title}"</span> <br>`+ 
        `<div class="extra3">${feature.properties.extra}</div></div>`+ 
        `</div>`;

    if(!feature.properties.title){

       wrap.innerHTML =  
        `<div class="close">X</div>`+
        `<div class="popUpContent" style="background-color:#e8f4ff">` +
        `<div class='pic'><img src = 
         "images/${feature.properties.image}"></div>`+ 
        `<div class="puName"><span 
         class="puName">${feature.properties.name}</span><br>`+ 
        `<div class="extra3">${feature.properties.extra}</div></div>`+ 
        `</div>`;

        }

         // EventListener attached to close button

  document.querySelector('.close').addEventListener('click', closePopup);
          function closePopup(e){
      if(document.querySelector('.wrapper').style.display = 'block'){
          document.querySelector('.wrapper').remove();
                }
             }

         });
     }

 });

 mymap.addLayer(myLayer)

0 个答案:

没有答案