在标记弹出窗口中单击超链接文本时如何显示模式？

Question

我正在定制 Bootleaf 模板，我想做的是当我点击描述文本时，模式将出现。我正在使用传单。我已经尝试了下面的代码，但是当我点击“描述”文本时没有任何反应。

这是模态

<div class="modal fade" id="descriptionModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-hidden="true"
        >
          &times;
        </button>
        <h4 class="modal-title">Description Title</h4>
      </div>
      <div class="modal-body">
        <p>Description here...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

这是打开模式的脚本

$("#description-btn").click(function () {
 $("#descriptionModal").modal("show");
 $(".navbar-collapse.in").collapse("hide");
 return false;
});

这是标记的脚本

var buildingLayer = L.geoJson(null);
var buildings = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "assets/img/campus.png",
        iconSize: [28, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
      }),
      title: feature.properties.NAME,
      riseOnHover: true,
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      layer
        .bindPopup(
          "<p><b><center>" +
            feature.properties.NAME +
            "</center></b></p>" +
            "<center><img src='" +
            feature.properties.PIC +
            "' style='width:150px;height:50x;'></img></center> " +
            "</br><a href='#' data-toggle='collapse' data-target='.navbar-collapse.in' id='description-btn'>" +
            feature.properties.DESC +
            "</a>" +
            "</br><a href='#'>" +
            feature.properties.ENTER +
            "</a>"
        )
        .openPopup();
      buildingSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Buildings",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0],
      });
    }
  },
});
$.getJSON("data/building.geojson", function (data) {
  buildings.addData(data);
  map.addLayer(buildingLayer);
});

Answer 1

在您向元素添加点击侦听器时，元素不存在，因为弹出窗口的 html 直到弹出窗口打开后才添加到 DOM。

所以在图层上添加一个监听器来检查弹出窗口是否打开：

layer.bindPopup(YOUR_CONTENT_BLABLA).openPopup();

layer.on("popupopen", () => {
    $("#description-btn").click(function () {
        $("#descriptionModal").modal("show");
        $(".navbar-collapse.in").collapse("hide");
        return false;
    });
});

在标记弹出窗口中单击超链接文本时如何显示模式？

How to show Modal when hyperlink text is clicked inside marker popup?

javascript

leaflet