Bootstrap modal 运行每次打开一次加一次

Question

我正在制作一个简单的地名词典应用程序。我通过单击一个标记打开一个模态，该标记打开时会显示该标记所在城市的照片。

它在我第一次 select 一个城市时按预期工作。任何后续点击任何标记的次数将循环遍历模态代码，次数与之前打开的次数相同。

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

我不明白为什么会这样。

Answer 1

根据 Ouroborus 的评论，我只是将 show.bs.model 移动到点击处理程序下方：

  
  
    $('#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');
    });

Bootstrap modal 运行每次打开一次加一次

Bootstrap modal running once plus once for every previous time it was opened

javascript

bootstrap-modal

Bootstrap modal 运行 每次打开一次加一次

Bootstrap modal running once plus once for every previous time it was opened

javascript

bootstrap-modal

Bootstrap modal 运行每次打开一次加一次