本文详解 jQuery/AJAX 表单在移动端（尤其是触摸设备）提交失效的根本原因，并提供兼容桌面与移动设备的健壮事件绑定方案，同时修正图片 src 更新等常见 DOM 操作错误。

本文详解 jquery/ajax 表单在移动端（尤其是触摸设备）提交失效的根本原因，并提供兼容桌面与移动设备的健壮事件绑定方案，同时修正图片 `src` 更新等常见 dom 操作错误。

在使用 jQuery + AJAX 实现无刷新表单交互时，一个典型陷阱是：代码在桌面浏览器中运行正常，但在 iOS 或 Android 移动端却完全失效——按钮点击无响应、submit 事件不触发、按钮文本/图片未更新。根本原因在于：移动端浏览器对 的触摸事件处理机制与桌面不同。click 事件在触摸设备上存在延迟（约 300ms），且 document.activeElement 在触摸后可能未正确指向被点击按钮；更关键的是，form.submit() 绑定在

上时，移动端常因焦点丢失或事件冒泡异常而静默失败。

✅ 推荐解决方案：按设备类型智能绑定事件

避免依赖不可靠的 form.submit，改用显式监听按钮的交互事件，并自动适配 click（桌面）或 touchstart（移动端）：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(document).ready(function () {
    // 检测是否为触摸设备（兼容现代浏览器）
    const isTouchDevice = 'ontouchstart' in document.documentElement 
                       || navigator.maxTouchPoints > 0;

    // 绑定唯一事件：桌面用 click，移动端用 touchstart
    const event = isTouchDevice ? 'touchstart' : 'click';

    $(document).on(event, '#button1, #button2', function (e) {
        e.preventDefault(); // 阻止默认提交行为

        const $btn = $(this);
        const selectedSong = $btn.val();
        const formData = new FormData();
        formData.append('song', selectedSong);

        $.ajax({
            url: "{{id}}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function (response) {
                console.log("AJAX success:", response);

                if (response.redirect_url) {
                    window.location.href = response.redirect_url;
                    return;
                }

                // ✅ 正确更新按钮文本（val() 适用）
                if (Array.isArray(response.compare_songs) && response.compare_songs.length >= 2) {
                    $('#button1').val(response.compare_songs[0]);
                    $('#button2').val(response.compare_songs[1]);
                }

                // ✅ 正确更新图片 src（必须用 prop()，非 val()！）
                if (Array.isArray(response.images) && response.images.length >= 2) {
                    $('#pic1').prop('src', response.images[0]);
                    $('#pic2').prop('src', response.images[1]);
                }
            },
            error: function (xhr, status, err) {
                console.error("AJAX failed:", status, err);
            }
        });
    });
});

⚠️ 关键注意事项

• val() vs prop()： 标签没有 value 属性，因此 $('#pic1').val(...) 完全无效；必须使用 prop('src', ...) 或原生 setAttribute('src', ...)。
• 事件委托优势：使用 $(document).on(...) 而非 $('#button1').on(...)，可确保动态生成或重绘后的按钮仍能响应事件。
• 防重复触发：若需更高容错（如快速连点），可加入时间节流（debounce），但上述设备检测方案已覆盖绝大多数场景。
• Flask 后端配合：确保返回 JSON 响应结构清晰，例如：

  return jsonify({
      "compare_songs": ["New Song A", "New Song B"],
      "images": ["/static/img/a.jpg", "/static/img/b.jpg"]
  })

通过将事件监听从

迁移至具体按钮，并智能适配输入方式，即可彻底解决移动端表单“点击无反应”问题，实现真正跨平台一致的用户体验。