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

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 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>

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

>Solution :

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