javascript - Tampermonkey:触发事件不适用于元素

Question

我正在尝试使用 Tampermonkey 在提供者 Angular 应用程序之上添加一些功能，但我被困在这个简单的事情上。我无法使用 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);

我已经考虑过了，并考虑了序列号如何在文本字段中结束，该字段必须是可访问的。也许是我试图触发的事件在函数声明时尚未声明？

非常感谢您的建议。

Answer 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");

}