javascript - 更改事件未从页面触发

Question

最初我发布了这个问题。但后来我通过反复试验得到了答案。现在我想知道为什么我的回答会奏效。

在saved page下面当我从扩展程序运行 $("#debitCard").change(); 时它不起作用但是当我从 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 事件，我必须使用 native 版本

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

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

the reference