Javascript 传单.js弹出窗口在某些情况下不允许输入文本框焦点

我已经建立了一个带有geojson的传单.js地图，显示了一组街区街道，并包含了下面演示的链接。点击任何街道段会打开一个弹出窗口，其中的表单包含大量输入元素和提交按钮，并且编码为聚焦第一个输入元素。如果在没有弹出窗口打开的情况下单击街道段，则一切正常——第一个元素聚焦，提交按钮可操作

但是，如果在弹出窗口打开时单击街道段，代码似乎会中断——焦点功能和提交按钮不起作用

我已经挣扎了一段时间，想弄清楚为什么会发生这种情况，但一直未能缩小范围。我认为这可能与DOM中的冲突在某个地方或时间有关，但我还没有解决它--希望这里的人会注意到这个问题

演示：

相关代码部分：

      var map = L.map('map', {zoomControl: false, almostOnMouseMove: false, zoomSnap: 0.25});
      map.setView([41.485, -81.705], 17);

      var myStyle = {
          "weight": 1
      };

      var myStyle_clicked = {
        "weight": 4
      };

      function layerClickHandler (e) {
        var marker = e.target,
            properties = e.target.feature.properties;

        function findMinMax(arr) {
          let maxLat = arr[0][1];
          let maxLng = arr[0][0];

          for (let i = 1, len=arr.length; i < len; i++) {
            let v = arr[i][1];
            if (v > maxLat) { maxLat = v; maxLng = arr[i][0];}
          }

          return [maxLng,maxLat];
        }

        var coordArray = marker.feature.geometry.coordinates[0];
        maxLatPt = findMinMax(coordArray);
        var latlng1 = new L.LatLng(maxLatPt[1], maxLatPt[0]);
        var popup1 = new L.Popup({keepInView:true, offset: new L.Point(0, -3)}).setLatLng(latlng1);
        popupContent = "<strong>segment_id: "+properties.segment_id+'<br>'+properties.description+'</strong><br><form id="test-form"><input name="parked" placeholder="Parked spaces" type="number" id="parked"><br><input name="open" placeholder="Open spaces" type="number" id="open"><br><input name="bad" placeholder="Bad park" type="number" id="bad"><br><input name="illegal" placeholder="Illegal park" type="number" id="illegal"><input type="hidden" id="street_name" name="street_name" value="'+properties.description+'"><input type="hidden" id="street_id" name="street_id" value="'+properties.segment_id+'"><input type="hidden" id="timestamp" name="timestamp"><input type="hidden" id="timestamp_time" name="timestamp_time"><input type="hidden" id="timestamp_day" name="timestamp_day"><input type="hidden" id="timestamp_month" name="timestamp_month"><input type="hidden" id="timestamp_date" name="timestamp_date"><button type="button" id="submit-form">Submit</button></form>'

        popup1.setContent(popupContent);

        function openPopupFeature(callback) {
          popup1.openOn(map);
          callback();
        }

        function focusFirstInput() {
          document.getElementById( 'parked' ).focus();
        }

        openPopupFeature(focusFirstInput);

        // does this function need to be in the L.DomUtil class?
        var buttonSubmit = document.getElementById('submit-form');
        L.DomEvent.addListener(buttonSubmit, 'click', function (e) {
          e.preventDefault();
          buttonSubmit.innerHTML="Wait";
          alert('OK success!');
          popup1.remove();
        });
      }

      var streets = L.layerGroup();
      var streetsJSON = L.geoJson(ohiocity_streets_network, {
        interactive: false,
        onEachFeature: function (feature, layer) {
          layer.on('click', layerClickHandler);
        }
      });

      streets.addLayer(streetsJSON);

      map.addLayer(streets);
      streetsJSON.setStyle({color:"#3388ff", weight:1});

      map.almostOver.addLayer(streets);

      map.on('almost:click', function(e) {
        streets.eachLayer(function(layer) {
          layer.setStyle({color:"#3388ff", weight:1});
        });

        var layer = e.layer;
        layer.setStyle({color:"red", weight:5});

        if (layer.openPopup) {
          layer.fire('click', e);
        }
      });

var map=L.map（'map'，{zoomControl:false，almostOnMouseMove:false，zoomSnap:0.25}）；
地图设置视图（[41.485，-81.705]，17）；
var myStyle={
“重量”：1
};
var myStyle_clicked={
“重量”：4
};
功能层ClickHandler（e）{
var标记=e.target，
属性=e.target.feature.properties；
函数findMinMax（arr）{
设maxLat=arr[0][1]；
设maxLng=arr[0][0]；
for（设i=1，len=arr.length；imaxLat）{maxLat=v；maxLng=arr[i][0]；}
}
返回[maxLng，maxLat]；
}
var coordArray=marker.feature.geometry.coordinates[0]；
maxLatPt=findMinMax（coordArray）；
var latlng1=新的L.LatLng（maxLatPt[1]，maxLatPt[0]）；
var popup1=newl.Popup（{keepInView:true，offset:newl.Point（0，-3）}）；
popupContent=“段id:”+properties.segment\u id+”
“+properties.description+”


提交”
popup1.setContent（popupContent）；
函数openPopupFeature（回调）{
popup1.openOn（map）；
回调（）；
}
函数focusFirstInput（）{
document.getElementById（'parked'）.focus（）；
}
openPopupFeature（focusFirstInput）；
//此函数是否需要在L.DomUtil类中？
var buttonSubmit=document.getElementById（'submit-form'）；
L.DomeEvent.addListener（按钮提交，'click'，函数（e）{
e、 预防默认值（）；
buttonSubmit.innerHTML=“等待”；
警报（“正常成功！”）；
popup1.remove（）；
});
}
var streets=L.layerGroup（）；
var streetsJSON=L.geoJson（ohiocity\u streets\u网络{
交互：错，
onEachFeature：功能（功能，图层）{
layer.on（'click'，layerClickHandler）；
}
});
街道。addLayer（streetsJSON）；
添加图层（街道）；
streetsJSON.setStyle（{颜色：#3388ff），重量：1}）；
地图.almostOver.addLayer（街道）；
map.on（'small:click'，函数（e）{
街道。每层（功能（层）{
layer.setStyle（{颜色：#3388ff），重量：1}）；
});
var层=e层；
layer.setStyle（{颜色：“红色”，重量：5}）；
if（layer.openPopup）{
层火（'click'，e）；
}
});

当我试图聚焦输入元素时，DOM似乎还没有准备好，它导致代码中断（但不会在控制台中抛出错误）

我使用setTimeout interval将侦听器移动到.focus函数中。我很难处理回调，所以如果有人能提出一个更简洁的方法来编写这个逻辑，我将不胜感激

popup1.setContent(popupContent);

        function openPopupFeature(callback) {
          popup1.openOn(map);
          callback();
        }

        function focusFirstInput() {
          //document.getElementById( 'parked' ).focus();
          setTimeout(function(){
              document.getElementById("parked").focus();
              var buttonSubmit = document.getElementById('submit-form');
              L.DomEvent.addListener(buttonSubmit, 'click', function (e) {
                e.preventDefault();
                buttonSubmit.innerHTML="Wait";
                alert('OK success!');
                popup1.remove();
              });
          }, 500);
        }

        openPopupFeature(focusFirstInput);

---

你能在这里发布你的相关代码吗？根据您的要求，链接可能是不受欢迎的，而且将来可能会更改。@GetSet添加了相关代码这是正确的方法，但是调用

popup1.closePopup（）

而不是

popup1.remove（）更干净，是首选的方式