在选择框中更改值后无法触发更改答案

【问题标题】：Unable to trigger change after changing value in select box在选择框中更改值后无法触发更改
【发布时间】：2018-09-18 13:21:48
【问题描述】：

我正在尝试更改下拉框中的值，然后触发值更改时发生的事件。代码很简单，如下所示：

    zScalerEndPointList.on("change", function(){
        // Change the value
        $("select#phase1_type").val("string:ddns");
        // Trigger the change
        $("select#phase1_type").trigger("change");
    })

值更改成功，但未触发事件。如果使用 jQuery 记录对象，我可以看到附加的更改事件为空。但是，如果在 Javascript 控制台窗口中手动运行以下命令，它会起作用：

$("select#phase1_type").trigger("change");

有什么想法可能是错的吗？我不拥有该应用程序，这是通过 TamperMonkey 执行的 Javascript。

感谢任何输入。

/帕特里克

【问题讨论】：

无法复制，代码工作正常：jsfiddle.net/18aebkjg。如果您有问题，我们需要查看更多代码才能复制问题
我能想到的唯一可能导致这种行为的事情是，如果您定义 change 事件处理程序在触发事件后
Tampermonkey: Trigger event does not work for element的可能重复

标签： javascript jquery events triggers

【解决方案1】：

我不确定我明白了，但你可以使用 watch 来查看 dorpdown 列表或类似的任何内容

 $scope.$watch(function () { return self.filter; }, function (newValue, oldValue) {
                        if (newFilter != oldFilter) {
                         // call trigger   
                        }
                    }, true);

【讨论】：

【解决方案2】：

原来这是一个重复的问题。我以前问过的。有点尴尬。 :)

Tampermonkey: Trigger event does not work for element

用下面的函数解决了：

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

    try {
        document.querySelector(s).dispatchEvent(event);
    } catch(err){
        console.log("Unable to fire event " + e + " on selector " + s);
        console.log(err);
    }
}

看起来这两个 Web 应用程序都在使用一些转译框架，通过删除和重新添加元素到 DOM 让我的生活变得艰难。希望这对其他人也有帮助。

/帕特里克

【讨论】：