Не удается закрыть динамически созданные всплывающие окна с прикрепленным к кнопке закрытия EventListener? - PullRequest
Новая
       14

Не удается закрыть динамически созданные всплывающие окна с прикрепленным к кнопке закрытия EventListener?

0 голосов
/ 27 мая 2019

Я создал собственное всплывающее окно в фиксированной позиции на карте листовки. При нажатии на маркер я могу закрыть всплывающее окно и открыть еще один, нажав на другой маркер. Однако, когда я не закрываю всплывающее окно, нажимая кнопку закрытия, а вместо этого нажимаю другой маркер, содержимое всплывающего окна изменяется, но я больше не могу закрыть всплывающее окно, нажимая кнопку закрытия, оно застревает. Как это решить? 

// 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)
...