为何iframe中$(document).on(event,sel,f)失效，而$(document).find(sel).on(event,f)正常？

嘿，我来帮你理清楚这两种写法的核心区别，以及为啥在iframe环境里会出现这种触发差异～

一、两种写法的本质差异 #

先拆解下你贴的两段代码：

1. 被注释的直接绑定写法 #

$(document).find('a.report-button').on('click', function (event) {
  alert("Thx!");
});

这是直接绑定事件：

• 先通过find('a.report-button')找到当前DOM中已经存在的所有匹配元素
• 然后给这些找到的元素直接绑定click事件
• 只有在调用这段代码时已经存在于页面中的按钮，才会被绑定事件；后续动态添加的同类型按钮不会触发这个回调

2. 未注释的事件委托写法 #

$(document).on('click', 'a.report-button', function (event) {
  alert("Thx!");
});

这是事件委托（事件代理）：

• 把click事件绑定在document这个顶层父元素上
• 当页面上任何元素触发click事件时，事件会向上冒泡到document
• 此时jQuery会检查触发事件的元素（或其后代）是否匹配a.report-button选择器，匹配才执行回调
• 优点是能给后续动态添加的元素也绑定事件，不需要重复绑定

二、iframe场景下的问题根源 #

你遇到的“委托写法不生效、直接写法生效”的问题，完全和iframe的上下文隔离特性有关：

• 如果你是在iframe内部的脚本中执行reportThanks()函数，那直接绑定写法里的$(document)指向的是iframe自身的document，能正确找到iframe内的按钮并绑定事件，所以点击能触发弹窗。
• 但事件委托写法里的$(document)如果指向的是父页面的document（比如脚本是在父页面执行，或者iframe脚本里的document被意外污染），那问题就来了：iframe内部的DOM和父页面DOM是完全隔离的，iframe内元素的点击事件只会冒泡到iframe自己的document，根本不会传到父页面的document上，所以父页面document上的委托监听器完全接收不到这个事件，自然不会触发alert。

三、解决办法 #

如果想让事件委托在iframe环境下生效，你需要确保绑定的是iframe内部的document：

1. 如果脚本在iframe内部执行：
   确保脚本在iframe DOM加载完成后执行，直接用iframe自身的document即可：

   function reportThanks() {
     $(document).on('click', 'a.report-button', function (event) {
       alert("Thx!");
     });
   }
   // 确保DOM加载完成后调用
   $(reportThanks);
   

2. 如果脚本在父页面执行，需要先获取iframe的document：

   function reportThanks() {
     // 先获取iframe元素的contentDocument
     const iframeDoc = $('#your-iframe-id')[0].contentDocument;
     $(iframeDoc).on('click', 'a.report-button', function (event) {
       alert("Thx!");
     });
   }
   

内容的提问来源于stack exchange，提问作者vmonteco