Javascript 将单击事件添加到IFrame，它将打开一个模式

我目前正在开发一个div，它将包含多达4个媒体类型div。媒体类型包括图像、PDF和Youtube视频
如果可能，我当前运行的代码将div创建为img。如果不可能（youtube视频/PDF），则将其作为iFrame打开
现在，用户可以单击imgs启动模式。但是，我无法获取iFrame来显示模式。
这是我的代码
HTML-modal

    <!-- Modal -->
<div id="mediaModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

  <!-- Modal content-->
   <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
     <h4 class="modal-title">title</h4>
     </div>
     <div class="modal-body">
       <p>here would be the description</p>
     </div>
     <div class="modal-media">  
       <p>here is the media</p>
     </div>
     <div class="modal-footer">
       <p>here would be the credits
     </div>
  </div>
 </div>
</div>

---

任何帮助都会很棒。谢谢大家!

您可以按照此答案中的步骤找到答案：

//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 = "<img data-toggle='modal' data-target='#mediaModal' id='m" + i + "'src='"+ media[1] + "'<img>";
    }
    else //throw it in a iframe tag
    {
       source = "<iframe data-toggle='modal' data-target='#mediaModal' class='modz' id='m" + i + "'src='"+ media[1] + "'></iframe>";
    }
    var div = $(source);
$("#media-container").append(div);

  //opens a modal box for IFrame media.
  $(".modz").on("click", function(e){
     console.log("BING");
     $("#mediaModal").modal('show');
  });