手动触发的Javascript事件未针对iFrame上下文中的元素传播

我正在开发一个WYSIWYG设计器，它允许最终用户通过[input type=“color”]字段选择颜色。该界面左侧有输入，右侧是指向生成预览的iframe。通常，单击输入并更改颜色时，它会调用函数update（通过输入字段上的更改事件由主干视图绑定）。然后，此更新函数更改iFrame中的CSS值，以实现实时预览。这很好用

然而，我正在构建一个单元测试页面，它本质上是测试将输入字段更改为某种颜色确实会更改预览中的颜色。本质上是这样的：“将输入更改为粉红色。预览中该输入对应的CSS选择器是否更改为粉红色？”

单元测试页面的结构是通过iFrame加载设计器。现在我们有：

• 第0层：单元测试报告
• 第1层：颜色变化输入
• 第2层：实时预览

---

问题是： 当单元测试运行时，它成功地更改了输入字段的值，但随后的更改事件似乎没有被视图捕获，因此实时预览不会更新

代码如下：

for (i in testable) {
    item = testable[i];
    item.element.val(tempColor);
    item.element.trigger('change');
}

如果我将其从测试模块的范围中拉出并使用浏览器的控制台，则此代码具有相同的效果（输入更新，但从未调用触发器）：

为了证明事件存在并且确实有效，如果我在没有测试层的情况下直接加载它（例如，直接加载应用程序），那么这段代码的工作方式正是预期的

$(document).find('input#cat_RowColoralternate').val('#AAEFCC').trigger('change');

---

唯一的区别是额外的iFrame层，所以我的理论是事件不会从0层传播到1层。

我不相信您可以通过这种方式跨帧触发jQuery事件。对

.trigger（）

的调用发生在父帧中，因此在iframe中的jQuery对象中根本无法正常工作

相反，您需要在iframe中获得jQuery对象，并在那里执行触发器：

var framejQuery = $('#testFrame').get(0).contentWindow.$;
framejQuery('input#cat_RowColoralternate').val('#AAEFCC').trigger('change');

---

我在过去发现的一件事是不同页面中有不同的jQuery引用。如果您在内部框架中获得jQuery对象，并尝试使用它触发触发器，而不是尝试在外部框架中使用jQuery对象触发它，会怎么样？这很有效，谢谢！这是故意的行为还是一个bug？如果我能在另一个上下文中瞄准某个元素并与之交互，我会认为我应该能够触发一个针对它的事件。我不确定——我从来没有深入研究过它来找出答案。jQuery本身应该传播这些事件，这无疑是一个bug，但他们是否这样看则是另一回事

var framejQuery = $('#testFrame').get(0).contentWindow.$;
framejQuery('input#cat_RowColoralternate').val('#AAEFCC').trigger('change');