传单弹出内容上的点击事件

Question

我正在尝试访问传单弹出窗口中的内容。具体来说，我添加了一个表单，其中包含我想要访问的按钮。但现在我只是尝试向弹出窗口本身添加一个事件。

$(".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")
  });

受此启发 post how to catch the click event on a leaflet popup

我不明白这个代码示例的 'context' 是什么？

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

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

Answer 1

为了能够访问删除按钮 class，一种方法是在 layer.bindPopup(popupContent)

上使用 on("popupopen") event

使用这种方式就不需要使用传单的L.DomUtil。在收听 popupopen event 时，您可以收听 jquery 的 click event，使用删除按钮的 class 分别从删除按钮调用删除事件。使用 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}`);
    });
  });
}

Demo

传单弹出内容上的点击事件

click event on leaflet popup content

html

css

jquery

popup

leaflet