无法使用 jquery 隐藏 bootstrap 模态

Question

当我点击带有 class modalphotos 的小 img 时出现我的模式但是，当我单击图像将其关闭时，事件处理程序没有响应。模式不会隐藏，也不会弹出警报。有人知道我做错了什么吗？

  //show modals
  $('.modalphotos img').on('click', function () {
    $('#modal').modal({
        show:true,
    })

    var mysrc = this.src;
    $('#modalimage').attr('src', mysrc);
    $('#modalimage').on('click', function () {
        alert('clicked');
        $('#modal').modal('hide');
    })//hide modal
  });//show modal

在 HTML 我有一个 id modal

的部分

            <!-- Modal -->
            <section id="modal" class="modal fade">
                <div class="modal-body">
                    <img id="modalimage" src="">
                </div><!-- modal-body -->
            </section>

顺便说一句，我有一些照片

    <aside class="selectie">
            <h2>Een kleine selectie</h2>
            <div class="modalphotos phtotgrid clearfix">
                <img src="images/misc/huisje1.jpg" width="20%" height="20%">
                <img src="images/misc/huisje2.jpg" width="20%" height="20%">
                <img src="images/misc/huisje3.jpg" width="20%" height="20%">
            </div>
        </aside>

用途是，当我点击一张照片时，我会看到显示大图的模式

Answer 1

嵌套事件处理程序是个坏主意。您能否也分享 HTML 以便更好地了解您要实现的目标。

 $('.modalphotos img').on('click', function () { 
      $('#modal').modal({ 
           show:true,
           keyboard:true //Enables user to press 'Esc' and close modal 
      }); 
 }); 
 $('#modalimage').on('click', function () { 
      $('#modal').modal('hide'); 
 });

正如我之前所说，嵌套事件不是一个好主意。所以我们把事件分开。

无法使用 jquery 隐藏 bootstrap 模态

can't hide bootstrap modal with jquery

jquery

modal-dialog