Javascript 父级上的事件委派仅适用于某些事件

为什么我可以在

window.parent.document

上使用事件委派收听某些事件，而不能收听其他事件？具体地说，我发现我能够监听按钮的click事件，但尝试对jQueryUI的事件执行同样的操作不会触发事件处理程序

例如，绑定到按钮的单击事件，如下所示：

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

但是，像下面这样尝试侦听自定义jqueryui

事件

并不能做到这一点（绑定到文档时，相同的代码在父页面上工作）

但是，将其绑定到父母的身体上会起到相反的作用

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

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

父HTML

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

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

        </iframe>
    </div>

---

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

---

因为自定义事件是用

jq1

触发的，所以只有绑定了

jq1

的事件才能接收它。另一方面，单击是一个本机事件，因此两者都会拾取。

可能与您从子页面而不是父页面使用

$

有关。jQuery的许多操作都基于当前文档，而当前文档就是您正在使用的

$

页面中定义的文档。我确实考虑过这一点，但为什么它会有所不同呢？为什么它对某些活动有效？对不起，我更新了我的评论。要知道为什么我们必须去源代码。你似乎是对的，我只是尝试使用父级的jQuery对象测试它，结果成功了。你知道我在哪里可以得到更多的信息吗？我的观点是，你把它绑在身体上的事实是无关紧要的。为了同样的效果，您也可以将其绑定到文档，不同之处在于您使用了

$

的哪个实例。

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

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

        </iframe>
    </div>

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');
}