相关疑难解决方法(0)

我已经看过几个关于bootstrap模态的问题,但没有一个完全像这样,所以我会继续.

我有一个模态,我打电话就像这样......

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

这工作正常,但是当我显示模态时我想要关注第一个输入元素...在可能的情况下,第一个输入元素的id为#photo_name.

所以我试过了

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

但这无济于事.最后,我尝试绑定到'show'事件,但即便如此,输入也不会集中.最后只是为了测试,因为我怀疑这是关于js加载顺序,我放入一个setTimeout只是为了看看我是否延迟了一秒,焦点是否有效,是的,它有效!但这种方法显然是废话.有没有办法在不使用setTimeout的情况下获得与下面相同的效果？

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });

我使用 Boostrap 3.7 和 Blade (Laravel 5.5)。

我试图console.log('works')在我的 boostrap 模式打开时显示，但它没有用。

HTML :

@foreach(...)

    ...

    <div class="modal fade" id="reservationModal" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
        <div class="modal-dialog">
            ...
        </div>
    </div>
@endforeach

JS：

$('#reservationModal').on('shown.bs.modal', function (e) {
    console.log('works');
});

我跟着这个文档：https : //getbootstrap.com/docs/3.3/javascript/#modals

我已经读过：在引导模式打开时调用函数

感谢帮助 ！

编辑 1：

我用这段代码解决了这个问题：

$(document).on('show.bs.modal', '#reservationModal', function (e) {
    console.log('works');
});

但是如何区分模态（因为它们进入foreach循环）？

就像是 ：

$(document).on('show.bs.modal', '#reservationModal-specificId', function (e) {
    console.log('works');
});

我在传单中有一张地图，使用以下代码，当页面加载时，该地图没有完全显示出来，我不知道为什么，如何解决？

var Mmap = L.map('Modalmap').setView([8.7144, 125.7481],8);
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright"></a>',
    subdomains: ['a','b','c']
}).addTo(Mmap);

L.control.scale({imperial:false}).addTo(Mmap);

var north = L.control({position: "topleft"});
north.onAdd = function(map) {
    var div = L.DomUtil.create("div", "info_legend leaflet-bar");
    div.innerHTML = '<img src="../lib/css/images/north-arrow-2.png" width="100%" height="100%">';
    return div;
}
north.addTo(Mmap);

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false
})
.on('markgeocode', function(e) {
    var box = e.geocode.center;
    document.getElementById("Latitude").value = box.lat;
    document.getElementById("Longitude").value = box.lng;
    var MarkLayer=L.marker([box.lat,box.lng]).addTo(Mmap);
    var group = new L.featureGroup([MarkLayer]);

    Mmap.fitBounds(group.getBounds());
}).addTo(Mmap);

这张地图是模态的，我Modal-1从导航栏中叫它

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav …