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

I am customizing the Bootleaf template, what I want to do is when I click the description text the modal will appear. I am using Leaflet. I already tried the code below but nothing happens when I click the "description" text.

This is the modal

<div  id="descriptionModal" tabindex="-1" role="dialog">
  <div >
    <div >
      <div >
        <button
          type="button"
          
          data-dismiss="modal"
          aria-hidden="true"
        >
          &times;
        </button>
        <h4 >Description Title</h4>
      </div>
      <div >
        <p>Description here...</p>
      </div>
      <div >
        <button type="button"  data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

This is the script to open the modal

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

And this is the script for the marker

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

CodePudding user response：

At the time you adding the click listener to the element, the element doesn't exist because the html of the popup is not added to DOM until the popup is opened.

So add a listener to the layer to check if the popup is opening:

layer.bindPopup(YOUR_CONTENT_BLABLA).openPopup();

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