when clicking the button inside jquery append it doesn't work – Jquery ajax

I have a problem I tried to make a pop up, so when I click the button in jquery append will display a pop up but the button does not work when I click. here is my code :
this is the jquery

<script type="text/javascript">
    jQuery(document).ready(function ()
   {
     jQuery('#searchs').on('change',function(e){
       var id = e.target.value;
       if(id !== [])
       {
       jQuery.ajax({
                  url : 'stores-list/' + id,
                  type : "GET",
                  dataType : "json",
                  success:function(data)
                  {

                     console.log('data',data);
                     var elm = $(this);
                     jQuery('#card-store').empty();
                     jQuery.each(data, function(index,element){
                         var html = '<div class="stores-list">' +
                                        '<div class="card store-card mb-3">' + 
                                            '<div class="col-md-8">'+
                                                '<div class="card-body"><h5 class="card-title">'+element.name+'</h5>' +
                                                    '<div><p class="card-text-address"><strong></strong><span> '+element.address+' </span></p>' +
                                                        '<p class="card-text-telp"><strong>Telepon: </strong><span>'+element.telepon+'</span></p>' +
                                                        '<p class="card-text-region"><strong>Region: </strong><span>Region not Related</span></p>' +
                                                        '<span class="card-lat" style="display:none">'+element.latitude+'</span>' +
                                                        '<span class="card-long" style="display:none">'+element.longitude+'</span>' +
                                                        '<span class="card-lat-map" style="display:none">'+element.latitude+'</span>' +
                                                        '<span class="card-long-map" style="display:none">'+element.longitude+'</span>' +
                                                        '</div></div></div></div><div class="row justify-content-end mb-3 mt-n3" id="modalpopup">'+
                                                            '<div class="map-container"><a class="map-link" id="map-linked" href="#" id="maps" data-toggle="modal" data-target="#mapModal">' +
                                                                '<i class="fa fa-map-marked-alt"></i></a></div><div class="info-container px-3"><a class="info-link" href="#" data-toggle="modal" data-target="#infoModal">' +
                                                                    '<i class="fa fa-info-circle"></i></a></div></div></div>'
                        $('#card-store').append(html);                      
                     });
                     }
                   });
                   }
       else
            {
                jQuery('#card-store').empty();
            }
     })
 });
   </script>

the class map-link inside the jquery append is the link that i tried to called but failed to show the pop up.

this is the another jquery that i tried to call syntax:

<script>
    $('.map-link').on('click', function (event) {
      event.preventDefault();
      var lat =  $(this).parents('.stores-list').find('.card>.col-md-8>.card-body>div>.card-lat-map').text();
      var long = $(this).parents('.stores-list').find('.card>.col-md-8>.card-body>div>.card-long-map').text();
      var mapOptions = {
        zoom: 18,
        center: new google.maps.LatLng(lat, long)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var lat =  $(this).parents('.stores-list').find('.card>.col-md-8>.card-body>div>.card-lat-map').text();
        var long = $(this).parents('.stores-list').find('.card>.col-md-8>.card-body>div>.card-long-map').text();
          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat, long),
              map: map,
              title: 'Hello World!'
          });
          var contentString = '<div id="content"><h1>Overlay</h1></div>';
          var infowindow = new google.maps.InfoWindow({
              content: contentString
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
          });
          // To add the marker to the map, call setMap();
          marker.setMap(map);
      $('#map-modal').modal();
  });  
</script>

the script is working if using blade laravel, but not working!!! when using html jquery append

this is the blade syntax that i tried to called:

  <div class="modal fade" role="dialog" id="map-modal">
    <div class="modal-dialog modal-lg" role="document">
       <div class="modal-content">

          <div class="modal-header">
            <h1>STORE LOCATION</h1>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
             </button>

          </div>
          <div class="modal-body text-center">
            <div id="map-canvas" style="width: 100%; height: 400px;"></div>
          </div>

       </div>
    </div>
 </div>

so this is my blade syntax that i tried to dynamicaly pop up with booth jquery that i make but does not seem to work to called the MAP-MODAL ID from the blade

i tried so many method just to find the culprit of the problem but stil not working.