無法使用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'); 
 }); 

正如我在嵌套事件之前所說，這不是一個好主意。 因此，我們將事件分開。