要在单击时捕获隐藏在传单弹出窗口中的ID，需要单击两次才能更新[Javascript]

Question

在我的Django项目中，我有一个非常恼人的javascript问题。目前正在开发一个webbapp，它可以读取放置在检修孔中的传感器的数据，用于测量水温。我们将这些传感器显示为Leafletmap上的标记，每个检修孔之间有管道系统。我目前正在将传感器id作为隐藏变量存储在每个检修孔中，然后获取它们来构建D3图，以显示所单击的特定检修孔的温度数据。

onEachFeature: (feature, layer) => {

                    for (let i = 0; i < place.length; i++) {

                        if (place[i].fields.pnamn === feature.properties.pnamn) {
                            sensorid = place[i].fields.eui;
                        }
                    }

                    var popupText = "<strong>" + feature.properties.pnamn + "<p id='popupText' style='display:none'>" + sensorid + "</p>" + "</strong>";
                    layer.bindPopup(popupText);
                },

[......] }).on('click', onClick).on('popupclose', startZoomer).addTo(map);

所讨论的id是p元素中的sensorid。它的工作方式是正常的，除了一个极其恼人的事实，即你可以只点击一个新的检修孔来更新图形，而不需要点击两次新的检修孔或者在地图上的任何地方点击。

我在下面的函数中捕获了sensorid，这就是我认为问题隐藏的地方。我真的不能理解为什么会发生这样的事情，希望在这一时刻能得到任何帮助！

                function onClick() {
                let id = document.getElementById("popupText").innerText;

                urlen = urlen.replace(/([A-Z])\w+/, id);
                console.log(id);
                console.log(urlen);

                var x = document.getElementById("chart-area");
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "block";
                }

                map.scrollWheelZoom.disable();


                update();

            }

用于更新图的新id的构建发生在函数初始化下的前4行。其余的用于在弹出窗口打开时锁定地图以进行鼠标滚轮滚动，以便用户可以在图形和地图之间滚动，因为它们堆叠在彼此的顶部。

正如我所说的，当系统必须点击两次时，这对我来说是非常恼人和不可接受的，如果你不知道会发生这种情况，它可能会扭曲你的视图，因为如果你只是在检修孔之间单击，但你得到了在当前检修孔之前单击的检修孔，那么它就会更新。

请帮帮我。

Answer 1

当点击事件发生时，很可能你的新弹出窗口还没有打开。这就解释了为什么找不到具有匹配id的元素，或者获取前一个元素。

使用"popupopen“事件可能会有更好的运气。

但首先，当你可以控制页面代码时，依靠从弹出文本中抓取你的传感器id是一种奇怪的设计。

一种更合适的设计是直接将传感器id与Marker或其相关特性关联起来，这样您就可以在Marker单击事件中轻松地检索它，而不必通过DOM查询。

例如，在您的onEachFeature中：

feature.properties.sensorid = sensorid

然后在您的onClick侦听器中：

function onClick(event) {
  // the clicked layer is event.layer if the listener is on a Feature Group,
  // but is event.target if the listener is directly on that layer.
  const sensorid = event.layer.feature.properties.sensorid;
}