Estoy haciendo una aplicación simple Gazetteer. Abro un modal haciendo clic en un marcador que se abre con una foto de la ciudad en la que se encuentra el marcador.
Funciona según lo previsto la primera vez que selecciono una ciudad. Cada vez que se haga clic en cualquier marcador, se recorrerá el código modal tantas veces como se haya abierto anteriormente.
markers.on('click', function (e) { city = e.layer.options.title $('#myModal').on('show.bs.modal', function (event) { //BELOW THIS LINE IS WHERE LOOPING OCCURS var modal = $(this); $.when(runAjax('City Reference', 'source/php/getCityInfo.php', 'POST',city)) .then(function() { cityReference = ajaxResponse.place_id; $.when(runAjax('Photo Reference', 'source/php/getPhotoRef.php', 'GET', cityReference)) .then(function() { photoReference = ajaxResponse.photoR; modal.find('.modal-body').html('<img src=https://maps.googleapis.com/maps/api/place/photo?photoreference=' + photoReference + '&input=green%20lanes&sensor=false&types=(regions)&key=<<<HIDDEN>>>&maxwidth=400&maxheight=400></div>'); }); }); modal.find('.modal-title').html('<b>' + city + '</b>'); }) // ABOVE THIS LINE IS WHERE LOOPING STOPS $('#myModal').modal('show'); });No entiendo por qué sucede esto.
Según el comentario de Ouroborus, acabo de mover show.bs.model debajo del controlador de clics:
$('#myModal').on('show.bs.modal', function (event) { var modal = $(this); $.when(runAjax('City Reference', 'source/php/getCityInfo.php', 'POST',city)) .then(function() { cityReference = ajaxResponse.place_id; $.when(runAjax('Photo Reference', 'source/php/getPhotoRef.php', 'GET', cityReference)) .then(function() { photoReference = ajaxResponse.photoR; modal.find('.modal-body').html('<img src=https://maps.googleapis.com/maps/api/place/photo?photoreference=' + photoReference + '&input=green%20lanes&sensor=false&types=(regions)&key=<<<HIDDEN>>>&maxwidth=400&maxheight=400></div>'); }); }); modal.find('.modal-title').html('<b>' + city + '</b>'); }); markers.on('click', function (e) { city = e.layer.options.title $('#myModal').modal('show'); });