在標記彈出視窗中單擊超鏈接文本時如何顯示模態？-有解無憂

我正在自定義 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);
});

uj5u.com熱心網友回復：

在您將點擊偵聽器添加到元素時，該元素不存在，因為彈出視窗的 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;
    });
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427159.html

標籤：javascript 传单

上一篇：將空的req.params路由表達到上一個路由

下一篇：將選項引數傳遞給toLocaleString()方法會從輸出中洗掉時間部分