title: Bootstrap modal event doesn't trigger
body: <p>I'm trying to bind an some code to trigger when my modal is opened. I have no trouble opening the modal but for some reason i can't figur out my event doesn't triggered.</p>
  
  <p>Here is my modal</p>
  
  <pre><code>&lt;div id="details" class="modal fade" style="display: none;" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button class="close" type="button" data-dismiss="modal"&gt;×&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;&lt;/h4&gt;
              &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
              &lt;p id="modal-body" class="text-defualt text- text-normal text-left"&gt;&lt;/p&gt;
          &lt;/div&gt;
              &lt;div class="modal-footer"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my JS script i'm trying to get to run</p>
  
  <pre><code>&lt;script&gt;
      $(function(){ // let all dom elements are loaded
        $("#details").on("show.bs.modal", function (e) {
            alert("event fired");
        });
      })
  &lt;/script&gt;'
  </code></pre>
  
  <p>I'm using bootstrap 3.3 and jQuery v1.11.2 </p>
  
  <p>Let me know if any more info would help solve the issue
  Thanks in advance </p>