手动更改事件未触发

Question

我有这个演示 html 和 JS：

 $('#inputs').on('change keypress keyup paste', 'input, select, textarea', function (event) { alert(event); console.log(event); }); $('button').on('click', function (event) { console.log("click"); var input = document.getElementById('number'); if("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); input.dispatchEvent(evt); } else { input.fireEvent("onchange"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="inputs"> <input name="number" type="number" id="number" value=""> </div> <button type="button">CLICK</button>

哪个不按预期工作。 alert 和 console.log 不显示任何内容。

我只想点击输入后面的按钮并发送到输入更改事件。 我的简单代码有什么问题？

Answer 1

检查下面的代码。 我使用了另一种触发事件的方式。 现在，如果您单击按钮，则会在输入上触发更改事件。

 $('#inputs').on('change keypress keyup paste', 'input, select, textarea', function (event) { console.log('Change event'); }); $('button').on('click', function (event) { console.log('Click event'); var input = document.getElementById('number'); var event = new Event('change', { bubbles: true, cancelable: true }); input.dispatchEvent(event); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="inputs"> <input name="number" type="number" id="number" value=""> </div> <button type="button">CLICK</button>