title: can't hide bootstrap modal with jquery
body: <p>My modal appears when I click a small img with class modalphotos
  However when i click the image to close it, the event handler doesn't respond. The modal doesn't hide and the alert doesn't pop up. Does anybody know whay i'm doing wrong? </p>
  
  <pre><code>  //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
  </code></pre>
  
  <p>in the HTML i have a section with id modal</p>
  
  <pre><code>            &lt;!-- Modal --&gt;
              &lt;section id="modal" class="modal fade"&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;img id="modalimage" src=""&gt;
                  &lt;/div&gt;&lt;!-- modal-body --&gt;
              &lt;/section&gt;
  </code></pre>
  
  <p>And in an aside i have some photo's</p>
  
  <pre><code>    &lt;aside class="selectie"&gt;
              &lt;h2&gt;Een kleine selectie&lt;/h2&gt;
              &lt;div class="modalphotos phtotgrid clearfix"&gt;
                  &lt;img src="images/misc/huisje1.jpg" width="20%" height="20%"&gt;
                  &lt;img src="images/misc/huisje2.jpg" width="20%" height="20%"&gt;
                  &lt;img src="images/misc/huisje3.jpg" width="20%" height="20%"&gt;
              &lt;/div&gt;
          &lt;/aside&gt;
  </code></pre>
  
  <p>The use would be that when i click a photo i get the modal showing the large version of the image</p>