Leaflet弹出框内容的点击事件

Question

Leaflet弹出框内容的点击事件

4

我正在尝试访问leaflet弹出窗口中的内容。具体来说，我已经添加了一个带有按钮的表单，我想要访问它。但现在我只是尝试为弹出窗口本身添加一个事件。

$(".leaflet-popup-content-wrapper .leaflet-popup-content").click(function(e) {
  alert("clicked");
});

LeafletJs 带弹出窗口的标记示例：

<form class="popup-form">
  <div class="form-group">
    <label class="mb-0" for="comment">Comment:</label>
    <textarea class="form-control" rows="4" class="comment">${feature.properties.note}</textarea>
  </div>
  <div class="d-flex">
    <button type="submit" class="btn btn-outline-info btn-sm">Save</button>
    <button class="delete-button btn btn-outline-danger btn-sm ml-auto">Delete</button>
  </div>
</form>

设置弹出内容的代码

var points = new L.geoJson(null, {

  onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.note);

    let myPopup = L.DomUtil.create('div', 'content');

    content = `
    <form class="popup-form">  
      <div class="form-group">
        <label class="mb-0" for="comment">Comment:</label>
        <textarea class="form-control" rows="4" class="comment">${feature.properties.id}</textarea>
      </div>
      <div class="d-flex">  
        <button type="submit" class="btn btn-outline-info btn-sm">Save</button>
        <button class="delete-button btn btn-outline-danger btn-sm ml-auto">Delete</button>
      </div>
    </form>
    `;

    layer.bindPopup(content); // Create empty popup

    $('#form', myPopup).on('click', function() {
      alert("form clicked")
  });

受此帖子启发如何在leaflet弹出窗口上捕获单击事件

我不明白这个代码示例的“上下文”是什么？

var content = L.DomUtil.create('div', 'content'),
    popup = L.popup().setContent(content);

L.DomEvent.addListener(content, 'click', function(event){
    // do stuff
}, context);

- geogrow

你想要访问哪个元素？表单代码是否放置在弹出窗口内？ - kboul

我添加了我正在使用的代码。我的目标是获取删除按钮上的点击事件（以删除...）以及保存按钮执行更新请求到数据库。目前，我正在尝试手动添加侦听器作为我的更新。 - geogrow

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kboul · Accepted Answer

为了能够访问删除按钮类，一种方法是在layer.bindPopup(popupContent)上使用on("popupopen")事件。使用这种方式，无需使用leaflet的L.DomUtil。在监听popupopen事件的同时，可以使用删除按钮的类来监听jquery的click事件，分别从删除按钮调用删除事件。使用preventDefault来避免页面刷新。

function onEachFeature(feature, layer) {
  const popupContent = `
    <form class="popup-form">  
      <div class="form-group">
        <label class="mb-0" for="comment">Comment:</label>
        <textarea class="form-control" rows="4" class="comment">${
          feature.properties.id
        }</textarea>
      </div>
      <div class="d-flex">  
        <button class="btn btn-outline-info btn-sm">Save</button>
        <button class="delete-button btn btn-outline-danger btn-sm ml-auto">
           Delete
        </button>
      </div>
    </form>
    `;

  if (feature.properties && feature.properties.popupContent) {
    popupContent += feature.properties.popupContent;
  }

  layer.bindPopup(popupContent).on("popupopen", () => {
    $(".delete-button").on("click", e => {
      e.preventDefault();
      alert(`now delete layer with id ${feature.properties.id}`);
    });
  });
}

演示