更改事件而不是从页面触发

Question

最初我发布了这个问题。但随后我通过反复试验得到了答案。现在我想知道我的答案能起作用的原因。

当我从扩展程序运行$("#debitCard").change();时，在下面的saved page中，它不起作用，但是当我从Chrome控制台运行时，它可以正常工作吗？

为什么此行为可能与从控制台运行时有所不同？我甚至在setTimeout

内运行它

我甚至在点击时在HTML中创建了一个按钮，它将调用此功能，但即使这样也无法正常工作。但是，每次从控制台调用都会有效。

答案

我将此$("#debitCard").change();替换为：

var element = document.getElementById('debitCard');
var event = new Event('change');
element.dispatchEvent(event);

我想知道这个Javascript / JQuery怪癖的原因

Answer 1

扩展中的jQuery在与内容页面中的jQuery或库不同的范围内运行。

如果内容页面中的功能使用jQuery或类似的事件处理程序，则不能从扩展范围中的jQuery调用那些处理程序，因为您无法引用它们。

但是，在内容脚本中本地或使用jquery触发事件确实有效，并将触发页面的处理程序。

修改

自从这篇文章以来，这个问题一直在我脑海中，今天我找到了一个例子来说明我的原始观点 - 你不能（总是）使用jQuery触发事件处理程序：

目标：

<a id="vcemail-link"  href="#" onclick="signOut();">Sign out...</a>

我无法使用我的扩展程序中的jquery触发此onclick事件，我必须使用本机版本

$('#vcemail-link').click(); // doesn't work
document.getElementById('vcemail-link').click(); // works

这可能会或可能不会让你满意@ user5858，但它很重要且值得记住，我认为它也适用于内联onchange（）。

the reference