Leaflet.js：如何访问标记内创建的HTML元素？

方法1：事件委托（推荐） #

由于弹窗是循环动态生成的，直接给按钮绑定事件可能会因为元素尚未加载而失效，用事件委托可以完美解决这个问题——监听父容器（或文档）的点击事件，判断触发源是目标按钮时执行逻辑：

// 监听文档点击，委托处理弹窗内的「Sono qui」按钮
document.addEventListener('click', function(e) {
  // 确认点击的是目标按钮
  if (e.target.classList.contains('link-segnalazione')) {
    e.preventDefault(); // 阻止a标签默认跳转
    // 找到当前弹窗里的人数数字元素
    const numElement = e.target.closest('.box-informazioni').querySelector('.giocatori-presenti strong');
    // 把文本转成整数，加1后更新
    let currentNum = parseInt(numElement.textContent);
    numElement.textContent = currentNum + 1;
  }
});

这种方法不需要修改原有的标记循环代码，不管后续新增多少标记，事件都能正常触发，适配动态内容场景。

方法2：在标记创建时绑定弹窗事件 #

如果想在生成标记时就关联事件，可以利用Leaflet的popupopen事件——弹窗打开后元素才会被插入DOM，此时再给按钮绑定点击事件：

修改你的循环代码如下：

luoghi.forEach(function (info) {
    let marker = L.marker([info.latitudine, info.longitudine], { icon: iconaPedone });
    let infoLuogo =
        `
    <div class="box-informazioni">
    <h3 class="nome-scheda">${info.nome}</h3>
    <p class="linea-p"></p>
    <p>Tipo: luogo comune o circolo</p>
    <p>Aperto da: <strong>LUN-VEN ore 10-18</strong></p>
    <p class="giocatori-presenti">Giocatori presenti: <strong>10</strong></p>
    <div class="box-pulsanti">
    <a class="link-segnalazione" href="#">Sono qui</a>
    <a class="link-coordinate" href="https://www.google.com/maps/place/${info.latitudine},${info.longitudine}">Vai al luogo</a>
    </div>
    </div>
    `;

    marker.bindPopup(infoLuogo);
    // 监听弹窗打开事件
    marker.on('popupopen', function() {
      // 获取弹窗内的按钮
      const btn = this.getPopup().getContent().querySelector('.link-segnalazione');
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        // 找到对应的人数数字元素
        const numElement = this.closest('.box-informazioni').querySelector('.giocatori-presenti strong');
        let currentNum = parseInt(numElement.textContent);
        numElement.textContent = currentNum + 1;
      });
    });
    marker.addTo(map);
});

这种方法会给每个弹窗的按钮单独绑定事件，适合需要针对单个标记做特殊处理的场景。

内容的提问来源于stack exchange，提问作者Andrea Lombardi Design