input[type="date"]的onchange事件绑定失败问题求助

核心问题分析 #

你原来的内联onchange能正常给输入框添加/移除visited类，但移到JS文件后失效，大概率是DOM加载时机不对或者动态元素未用事件委托导致的，另外需要还原你原来的类切换逻辑，同时实现脏检查需求。

解决方案分点说明 #

1. 确保DOM加载完成后再绑定事件

如果你的JS代码在页面DOM元素加载前执行，$(".dateTest")会找不到目标元素，绑定自然无效。解决办法是把代码包裹在$(document).ready()中，或者把JS脚本标签放在<body>底部：

$(document).ready(function() {
  $(".dateTest").change(function() {
    var $input = $(this);
    // 还原你原来的类切换逻辑：空值移除，非空添加
    if ($input.val() === '') {
      $input.removeClass('visited');
    } else {
      $input.addClass('visited');
    }
    // 脏检查逻辑：对比当前值和prevvalue属性
    var isDirty = $input.val() !== $input.attr('prevvalue');
    // 标记脏数据示例：给当前行加样式
    $input.closest('tr').toggleClass('dirty-row', isDirty);
    
    console.log($input.val());
  });
});

2. 处理动态生成的表格行

如果你的表格是通过MVC动态渲染（比如分页加载、新增行）的，直接绑定.dateTest只能作用于页面初始加载时存在的元素。这时候要用事件委托，把事件绑定到静态的父元素（比如表格）上：

$(document).ready(function() {
  // 选择最接近的静态父元素（替换成你的表格ID或选择器）
  $('#your-table-id').on('change', '.dateTest', function() {
    var $input = $(this);
    // 类切换逻辑
    if ($input.val() === '') {
      $input.removeClass('visited');
    } else {
      $input.addClass('visited');
    }
    // 脏检查逻辑
    var isDirty = $input.val() !== $input.attr('prevvalue');
    $input.closest('tr').toggleClass('dirty-row', isDirty);
    
    console.log($input.val());
  });
});

3. 移除内联事件避免冲突

记得把HTML里的内联onchange属性删掉，避免和JS文件中的事件逻辑冲突：

<td>
  <input class="dateTest" type="date" onclick="this.showPicker()" 
         prevvalue="@dateString" value="@dateString" 
         min="@previousString" max="@endString" />
</td>

4. 检查jQuery是否正确引入

确保页面已经加载了jQuery，比如在<head>或<body>底部引入本地的jQuery文件，检查文件路径是否正确：

<script src="/path/to/your/jquery.min.js"></script>

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