无法使用 jquery 隐藏引导模式

Question

当我单击一个带有类 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 -->
            <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'); 
 }); 

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