Tampermonkey：触发事件对元素不起作用答案

【问题标题】：Tampermonkey: Trigger event does not work for elementTampermonkey：触发事件对元素不起作用
【发布时间】：2018-02-11 07:58:52
【问题描述】：

我正在尝试在提供者 Angular 应用程序之上使用 Tampermonkey 添加一些功能，但我被困在这个简单的事情上。我无法使用 CodePen 复制该问题，因此我们将不得不寻求理论和建议。我会尽量具体一点。

在页面加载时添加此时间间隔以检查 ID 为 serialNumberInput 的输入何时可用。然后我在表单中添加一个下拉列表，并为其附加一个 onChange 事件，以使用所选选项的值更新串行输入字段。但是，触发部分永远不会发生。当我手动输入它们时它确实有效，但不使用脚本。

var populateSerialNumbersTimer = setInterval(function(){

    var serial = $("input#serialNumberInput");

    if($(serial).length >= 1){

        $(serial).css("display", "inline").css("width", "50%");
        $(serial).after(deviceToSerialSelectionHTML);

        $("select#deviceToSerial").on("change", function(){
            $(serial).val($("select#deviceToSerial").val());
            $(serial).trigger("change");
            $(serial).trigger("blur");

        });

        clearInterval(populateSerialNumbersTimer);
    }
}, 200);

我已经考虑过了，并考虑到序列号如何最终出现在文本字段中，该字段必须是可访问的。也许是我试图触发的事件在函数声明时没有声明？

非常感谢您的建议。

【问题讨论】：

我不是 jQuery 专家，但如果您已经定义了 serial = $(…)，那么您不能在没有更多 jQuery 构造函数的情况下直接引用它吗？这会将诸如 $(serial).css(…) 之类的调用更改为 serial.css(…)，$(serial).trigger(…) 更改为 serial.trigger(…) 等（听到 jQuery 神奇地使这两种方法都能正常工作，我不会感到惊讶。）
谢谢亚当，这是一个很好的建议！从来没想过。现在我需要很多代码。 :)

标签： javascript jquery tampermonkey

【解决方案1】：

看起来 jQuery 试图以某种方式缓存事件。这就是我使用本机 javascript 解决它的方法，以防其他人感兴趣：

function triggerEvent(e, s){
    "use strict";
    var event = document.createEvent('HTMLEvents');
    event.initEvent(e, true, true);
    document.querySelector(s).dispatchEvent(event);
}

$("select#deviceToSerial").on("change", function(){

    serialNumberInput.val($("select#deviceToSerial").val());

    triggerEvent("change", "input#serialNumberInput");
    triggerEvent("blur", "input#serialNumberInput");

}

【讨论】：

您，先生，刚刚结束了我 2 小时的挫败感！你是怎么想到 jQuery 缓存事件的？
当时我真的不记得了，但了解我自己我会说这纯粹是固执。很高兴它最终帮助了其他人！