模态对话框页面中自定义事件无法触发的问题咨询

这个问题我之前做APEX项目时也碰到过，核心原因是APEX模态对话框的DOM上下文和事件作用域和普通页面存在差异，具体拆解下来有这两个关键点：

1. 事件冒泡的范围限制
   普通页面里你把动态动作绑定到document上，自定义事件能正常冒泡到document层级被捕获。但模态对话框是主页面里的独立弹窗容器，当你在模态框内触发事件时，这个事件默认只在模态框自身的DOM上下文里冒泡，没法传递到主页面的document对象上——而你的动态动作刚好是绑定在主页面的document上，自然就捕获不到了。

2. 动态动作的作用域不覆盖模态框
   模态对话框加载后是一个独立的页面环境，你在主页面创建的动态动作，它的作用域并没有延伸到模态框的DOM里，相当于两个“独立空间”，事件自然跨不过去。

给你几个亲测有效的解决办法：

• 方法一：指定事件触发到主页面的document
  修改触发事件的JS代码，明确把事件绑定到主页面的document上，替换原来的触发代码：

  javascript:$(top.document).trigger({type:'customEvent', student_id:'#ID#'});
  

  这里用top.document指向主页面的document对象，让事件直接在主页面的上下文触发，你的动态动作就能正常捕获到了。另外注意把参数名改成student_id，和你动态动作里取的this.browserEvent.student_id对应上，不然会取不到值。

• 方法二：在模态对话框页面内创建对应动态动作
  既然模态框是独立页面，直接在模态对话框的页面里创建相同的动态动作：选择类型设为JavaScript Expression，表达式填document（此时的document是模态框自身的上下文），这样在模态框内触发事件时，就能直接被页面内的动态动作捕获。

• 方法三：调整事件绑定的目标元素
  不要绑定到document，而是绑定到主页面里始终存在的全局容器（比如#apex_body）：把动态动作的选择类型改成jQuery Selector，选择器填#apex_body；触发事件的代码也指向这个元素：

  javascript:$('#apex_body', top.document).trigger({type:'customEvent', student_id:'#ID#'});
  

备注：内容来源于stack exchange，提问作者shady