событие клика на всплывающем содержании листовки

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

Записано в этом сообщении как перехватить событие click во всплывающем окне листовки

Я не понимаю, что такое контекст этого примера кода?

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

Демо