Chrome控制台使用element.dispatchEvent报错，如何修复代码使其运行？

这个错误的核心原因很简单：你传给changeValue的是jQuery对象，而不是原生的DOM元素——$('#typeahead-input-to')返回的是jQuery包装后的集合，它本身没有dispatchEvent这个原生DOM方法，所以才会抛出这个类型错误。

给你两种可行的修改方案：

方案1：把jQuery对象转为原生DOM元素 #

直接通过[0]或者.get(0)从jQuery集合中取出对应的原生元素，再传给你的changeValue函数：

var script = document.createElement("script");
script.setAttribute("src", "//code.jquery.com/jquery-latest.min.js");
script.addEventListener('load', function() {
    const changeValue = (element, value) => {
        const event = new Event('input', { bubbles: true })
        element.value = value
        element.dispatchEvent(event)
    }
    // 这里用[0]取出原生DOM元素
    changeValue($('#typeahead-input-to')[0], 'Syd');
}, false);
document.body.appendChild(script);

方案2：直接用jQuery的API完成操作 #

既然已经加载了jQuery，完全可以用它自带的方法来设置值并触发事件，代码更简洁：

var script = document.createElement("script");
script.setAttribute("src", "//code.jquery.com/jquery-latest.min.js");
script.addEventListener('load', function() {
    // 一步到位：设置值 + 触发input事件
    $('#typeahead-input-to').val('Syd').trigger('input');
}, false);
document.body.appendChild(script);

另外提一句：你原来的代码里在jQuery加载完成后又创建了一个空的script标签并append到body，这部分是多余的，可以删掉，避免不必要的DOM操作。

内容的提问来源于stack exchange，提问作者Valip