iOS端input[type=date]的onchange事件不触发问题求助

嘿，这个坑我之前做电商结账流程的时候也踩过！iOS Safari对input[type="date"]的事件触发逻辑确实和其他浏览器不一样，再加上你代码里还有个小语法错误，难怪会出问题。我来给你拆解下解决方案：

首先修正代码里的语法错误 #

你写的jQuery选择器少了一个闭合的方括号，这会直接导致事件绑定失败：

// 错误写法：缺少闭合的]
$('input[name="delivery_date"')
// 正确写法
$('input[name="delivery_date"]')

针对iOS的事件兼容处理 #

iOS Safari里的日期选择控件有个特殊逻辑：只有当用户点击「完成」按钮或者控件失去焦点时，才会触发change事件。如果用户只是滚动选择日期但没点完成，change是不会触发的。要覆盖所有操作场景，建议同时监听input和change事件：

function updateDeliveryDay() {
  $('input[name="delivery_date"]').on('change input', function () {
    // 这里写你的配送方式启用/禁用逻辑
    const selectedDate = $(this).val();
    console.log('选中的配送日期:', selectedDate);
    // 示例逻辑：根据日期判断并操作配送方式
    // if (selectedDate === '2024-05-20') { 
    //   $('.delivery-option').prop('disabled', false);
    // }
  });
}

为什么这么做？ #

• change事件：适配桌面浏览器、安卓端，以及iOS用户点击「完成」后的场景
• input事件：在iOS用户滚动选择日期的过程中实时触发，确保每一次日期选择操作都能被捕获到

额外建议：适配动态生成的元素 #

如果这个日期输入框是页面加载后通过AJAX等方式动态渲染出来的，直接绑定事件可能失效，这时候要用事件委托绑定到父元素（或document）上：

// 事件委托写法，兼容动态生成的元素
$(document).on('change input', 'input[name="delivery_date"]', function () {
  // 你的逻辑代码
});

我当时这么改完之后，iOS端的事件触发就完全正常了，你可以试试这个方案！

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