Javascript 在内容元素上添加动态内容写入jquery事件句柄的动态附加iframe无效

我通过jquery将动态iframe附加到文档ready上。 `

` 好的，通过这个函数渲染iframe

function renderIframe(){


 return [

  '<div id="mydiv">',
     '<iframe id="frame" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px;display:none"  height="120%" width="120%">',
     '</iframe>',
 '</div>'
  ].join("")

  }

并试图处理类似这样的事件

 $('document').on('load','#frame', function(){
    console.log("frame loaded")
    $(this).contents().find('body').on('click', '#btnClose', function(e){
        e.preventDefault(e);
        alert("link clicked!" );
    });
    });

---

这里有几个问题

• iFrame.contents（）.attr（'target'，'u parent'）

  将向DOM中的每个元素添加

  target

  属性。我不知道你想用它做什么，但这不是个好主意
• 无论如何，iframe在该点是空的，因此不会发生任何事情，可以删除该行

• renderframe（）

  逻辑实际上并不需要它自己的函数；它只返回单个字符串，不包含任何业务逻辑
• 从HTML字符串生成DOM结构不需要创建

  DOMParser

  实例。只需直接使用从AJAX请求接收的字符串在iframe中设置

  innerHTML

• iFrame不会触发

  load

  事件，因此代码块永远不会触发。更好的方法是在填充内容后，将事件处理程序附加到AJAX回调中
• 如果希望内容在页面中可见，则需要删除CSS中的

  display:none

  设置
• 在CSS主题上，不要将其放在HTML元素的内联

  style

  属性中。使用外部样式表

说了这么多，试试这个：

$（“body”）.append（renderframe（））；
函数renderFrame（）{
返回“”；
}
//在AJAX回调中：
变量iFrame=$（“#frame”）；
让数据='Lorem ipsum
Close'；//AJAX响应
var iFrameDoc=iFrame[0]。contentDocument | | iFrame[0]。contentWindow.document；
iFrameDoc.body.innerHTML=数据；
$（'#frame'）.contents（）.find（'body'）.on（'click'，'#btnClose'，函数（e）{
e、 防止违约（e）；
警报（“点击链接！”）；
});

---

请注意，这些代码片段不允许使用iframe，因此这里有一个JSFIDLE，其中包含一个。

非常感谢您提供了这样一个详细的答案，实际上是关于AJAX POST am接收引导模式，服务器端以HTML页面的形式呈现。我已经用iframe innerhtml替换了DOMParser，模式现在没有打开。那么，为什么要在iframe中添加引导模式呢？这没有意义，只是让它覆盖在整个屏幕上。另一方面，你的权利是没有道理的。顺便说一句，为什么模态在这种情况下不起作用，你能详细说明一下吗？如果没有看到相关的代码，我真的说不出它为什么对你不起作用。然而，如果HTML是一个引导模式，那么您真的应该这样显示它，而不是在iframe中显示它。你这样做只会制造更多的问题

 var iFrame = $('#frame');
      iFrame.contents().attr('target','_parent');

   var htmlDoc = (new DOMParser()).parseFromString(data, "text/html");

      var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
   iFrameDoc.write( htmlDoc.documentElement.outerHTML);
   iFrameDoc.close();`

 $('document').on('load','#frame', function(){
    console.log("frame loaded")
    $(this).contents().find('body').on('click', '#btnClose', function(e){
        e.preventDefault(e);
        alert("link clicked!" );
    });
    });