У меня есть проблема, я попытался сделать всплывающее окно, поэтому, когда я нажимаю кнопку в jquery append, отображается всплывающее окно, но кнопка не работает, когда я нажимаю. вот мой код: это 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>
ссылка на карту класса внутри приложения jquery - это ссылка, которую я пытался вызвать, но не смог показать всплывающее окно.
это еще один jquery, который я пытался вызвать синтаксис:
<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>
скрипт работает, если используется blade laravel, но не работает!!! при использовании html jquery append
это синтаксис блейда, который я пытался вызвать:
<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">×</span>
</button>
</div>
<div class="modal-body text-center">
<div id="map-canvas" style="width: 100%; height: 400px;"></div>
</div>
</div>
</div>
</div>
, так что это мой синтаксис блейда, который я пробовал чтобы динамически всплыть с кабиной jquery, которую я делаю, но, кажется, не работает, чтобы вызвать MAP-MODAL ID от лезвия
Я пытался так много методов, чтобы найти виновника проблемы но все еще не работает.