title: Adding on click events to IFrame which opens a modal
body: <p>I am currently developing a div that will contain up to 4 <em>Media</em> type divs.  The media types include images, PDFs, and Youtube videos. <br> The code I currently have running creates the divs as imgs if possible. If it is not possible(youtube videos/pdfs) it opens them as IFrames. <br> As of now, the user is able to click on the imgs which launches a modal. However, I am unable to to get the IFrames to show the modal.<br>Here is my code<br>  HTML - Modal<br></p>
  
  <pre><code>    &lt;!-- Modal --&gt;
  &lt;div id="mediaModal" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
  
    &lt;!-- Modal content--&gt;
     &lt;div class="modal-content"&gt;
       &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
       &lt;h4 class="modal-title"&gt;title&lt;/h4&gt;
       &lt;/div&gt;
       &lt;div class="modal-body"&gt;
         &lt;p&gt;here would be the description&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="modal-media"&gt;  
         &lt;p&gt;here is the media&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="modal-footer"&gt;
         &lt;p&gt;here would be the credits
       &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  Here is my javascirpt
  <br></p>
  
  <pre><code>//this creates img/iframes dynamcially and throws them into a media-container div
  var source = null;
      //if it is not a youtube video/pdf/txt, put it in a img tag
      if( null == ( media[1].match(/pdf/i) || media[1].match(/txt/i) || media[1].match(/youtube.com/) ) )
      {
         source = "&lt;img data-toggle='modal' data-target='#mediaModal' id='m" + i + "'src='"+ media[1] + "'&lt;img&gt;";
      }
      else //throw it in a iframe tag
      {
         source = "&lt;iframe data-toggle='modal' data-target='#mediaModal' class='modz' id='m" + i + "'src='"+ media[1] + "'&gt;&lt;/iframe&gt;";
      }
      var div = $(source);
  $("#media-container").append(div);
  </code></pre>
  
  <p>I tried adding a class to the iFrame and adding an onClick method, but it does not seem like the IFrame is picking up a click.</p>
  
  <pre><code>  //opens a modal box for IFrame media.
    $(".modz").on("click", function(e){
       console.log("BING");
       $("#mediaModal").modal('show');
    });
  </code></pre>
  
  <p>Any help would be awesome.  Thank you!</p>