HTML与JS开发保险合同搜索表单时搜索点击事件异常排查

问题根本原因 #

你的三个搜索表单，每个都用了重复的id="search"作为提交按钮的ID。HTML规范要求页面内ID必须全局唯一，jQuery通过$("#search")选择元素时，只会匹配页面中第一个出现的对应ID的元素，也就是姓名搜索表单里的按钮。你切换到VIN、日期范围搜索时，显示的另外两个表单里的搜索按钮根本没有绑定到你写的点击事件，点击后直接走默认表单提交逻辑，自然不会触发alert语句。

修复方案 #

方案1：改用class绑定事件 #

把所有表单里的搜索按钮的ID改成class，比如class="roundbutton search-btn"，然后修改事件绑定代码为：

$(".search-btn").click(function (event) {
  // 原有逻辑保持不变
})

方案2：使用事件委托绑定 #

不需要修改按钮属性，直接把事件绑定到页面的公共父元素上即可：

$("body").on("click", "#search", function (event) {
  // 原有逻辑保持不变
})

这样不管哪个表单里的#search按钮被点击，都会触发绑定的逻辑。

额外优化建议 #

最好也把三个表单的重复ID都改掉，避免后续其他选择器逻辑出问题，比如把三个表单的ID分别设为agreements-name、agreements-vin、agreements-recent，保证所有元素ID全局唯一。

其他可能的排查点 #

如果修改ID重复问题后还是异常，可以检查：

• selected()切换表单显示隐藏的逻辑有没有问题，会不会误把下拉选择框#which也给隐藏了，导致$("#which").val()拿不到值直接报错阻断执行
• 切换到VIN、日期表单时，控制台有没有抛出JS错误，比如moment.js有没有正确引入、对应表单里的输入框ID不存在导致取值报错

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