父事件委托仅适用于某些事件答案

【问题标题】：Event delegation on parent only works with some events父事件委托仅适用于某些事件
【发布时间】：2014-06-24 21:40:01
【问题描述】：

为什么我可以使用window.parent.document 上的事件委托来监听某些事件，而不能监听其他事件？具体来说，我发现我能够监听按钮的单击事件，但尝试对 jQueryUI 的 dialogbeforeclose 事件执行相同操作不会触发事件处理程序。

例如绑定到一个按钮的点击事件，如下所示

  $(window.parent.document).on('click', '#btnTest', function () {
         alert('Button clicked');
   });

但是尝试像下面这样收听自定义 jQuery UI event 却没有（绑定到文档时相同的代码在父页面本身上起作用）

$(window.parent.document).on('dialogbeforeclose', function () {
       alert('Dialog closing');
 });

但是将它绑定到父级的身体上

 window.parent.$('body').on("dialogbeforeclose", function(event, ui) {
      alert('Bound on body');
  });

对于一些额外的上下文，我有一个父 html 页面，它有一个 jQuery UI 对话框，其中有一个 iFrame。

父 HTML

   <div id="btnCnt">
        <input type="button" id="btnTest" value="Test 2"/>
    </div>

    <div id="popUpCnt" >
        <iframe id="frmTest">

        </iframe>
    </div>

【问题讨论】：

可能与您从子页面而不是父页面使用 $ 的事实有关。 jQuery 的很多操作都基于当前文档，这将是您正在使用的 $ 定义的页面的文档。
我确实想过，但为什么会有所作为？为什么它适用于某些活动？
对不起，我更新了我的评论。要知道为什么，我们必须找到源头。
您似乎是正确的，我只是尝试使用父级的 jQuery 对象对其进行测试并且它有效。你知道我可以在哪里获得更多信息吗？
我的意思是，你将它绑定到身体这一事实是无关紧要的。您也可以将其绑定到文档以获得相同的效果，不同之处在于您使用了 $ 的哪个实例。

标签： javascript jquery jquery-ui iframe event-delegation

【解决方案1】：

当使用 .trigger() 触发事件时（自定义事件就是这种情况），jQuery 会遍历并触发存储在该 jQuery 数据缓存实例中的事件。由于您使用与触发事件的实例不同的 jQuery 实例绑定到事件，因此您的事件处理程序从未被触发。例如，看这个小提琴：

http://jsfiddle.net/EJg8b/

jq2 = $.noConflict();
jq1 = $;

jq1('body').on('click', function () {
  console.log('jq1 click event!');
});
jq2('body').on('click', function () {
  console.log('jq2 click event!');
});

jq1('body').on('myCustomEvent', function () {
  console.log('jq1 myCustomEvent event!');
});
jq2('body').on('myCustomEvent', function () {
  console.log('jq2 myCustomEvent event!');
});

function onButtonClick() {
  jq1('button').trigger('myCustomEvent');
}

因为自定义事件是用jq1触发的，所以只有jq1绑定的事件才能接收。另一方面，点击是原生事件，因此被两者都拾取。

【讨论】：