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

受此帖子how to catch the click event on a leaflet popup

的影响

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

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

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

Answer 1

要获得对删除按钮类的访问权限的一种方法是在on("popupopen") event上使用layer.bindPopup(popupContent)

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

1 个答案: