Javascript触发change事件突然失效,求替代解决方案
2024年4月28日更新:经排查,问题并非出在本人代码,而是网站开发者意外添加了致命代码,次日已修复。抱歉未能及时回复。
问题
我用下面这段代码给输入框赋值并触发change事件已经十年了:
var importDate = "03/07/2023"; $("#es-modal-very-important-date").val(importDate).trigger('change')
现在这段代码只能把日期填进输入框,但触发不了change事件,网页根本识别不到日期变了,就好像必须得用户手动点击或者和日期选择器交互才能触发变更一样。
我还试过下面这段代码触发change事件,还是没用:
var myInput = document.getElementById("es-modal-very-important-date"); myInput.dispatchEvent(new Event("change"));
我怀疑开发这个记录添加页面的程序员改了相关逻辑,但联系不上他们。我每天要用JS自动化加大概100条记录,有没有其他可行的方案?
可行解决方案
- 模拟完整用户交互流程:
先触发输入框的focus事件,赋值后触发blur,最后再触发change,模拟用户手动输入后离开的操作:const input = $("#es-modal-very-important-date"); input.focus().val("03/07/2023").blur().trigger('change'); - 调用日期选择器组件API(如果是组件化输入框):
很多日期输入框是基于UI组件实现的,直接操作原生输入框可能不生效,要调用组件自带的设置方法。比如jQuery UI Datepicker可以这么写:$("#es-modal-very-important-date").datepicker("setDate", "03/07/2023"); - 触发多类事件:
有些框架会监听input事件而非change,或者需要同时触发多个事件来触发逻辑,试试同时触发input和change:const input = document.getElementById("es-modal-very-important-date"); input.value = "03/07/2023"; // 开启事件冒泡,确保上层监听能捕获到 input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); - 检查事件绑定:
打开浏览器控制台,执行getEventListeners(document.getElementById("es-modal-very-important-date")),查看输入框绑定的所有事件,确认是否有自定义事件(比如date-update)或者特殊触发条件,针对性触发对应事件。 - 模拟点击日期选择器:
如果输入框关联了弹窗式日期选择器,直接模拟打开选择器并点击目标日期:// 触发输入框点击,打开日期选择器弹窗 $("#es-modal-very-important-date").click(); // 替换成实际日期选择器中目标日期的元素选择器 $(".date-picker-item[data-date='2023-03-07']").click();
内容的提问来源于stack exchange,提问作者John Muggins
相关产品推荐
相关产品推荐

