Captive Portal提交按钮PC端正常，移动端无响应问题求助

核心问题排查 #

1. JS语法错误：你的JQuery代码末尾多了一个多余的});，这会导致脚本解析失败，手机端浏览器对语法错误容忍度更低，直接导致点击事件无法绑定。
2. 事件绑定时机：旧版JQuery（1.10.2）在DOM未完全就绪时绑定事件可能失效。
3. 缺失元素引用：代码中尝试显示#ok_btn，但HTML里未定义该按钮。

修复步骤 #

1. 修正JQuery语法错误 #

移除代码末尾多余的闭合括号，同时添加AJAX错误处理方便调试：

$(document).ready(function() {
    $("#login_btn").click(function (e) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var edata = $("#loginform").serialize();

        if ($("#name").val() == "" || $("#email").val() == "" || $("#contact").val() == "") {
            $("#fillall").show();
            $("#fillall").text("请填写所有字段");
        } else if (!regex.test($("#email").val())) {
            $("#fillall").show();
            $("#fillall").text("请输入有效的邮箱地址！");
        } else {
            $("#fillall").hide();
            $.ajax({
                url: "add_api.php",
                type: "POST",
                data: edata,
                success: function (res) {
                    console.log('AJAX Success:', res);
                    if(res == "success"){  
                        $('#message').html('<label class="label label-success center-block" style="width:250px;height:auto;line-height:15px;font-size:13px;">感谢提交信息。<br>几秒后将为您跳转至目标页面</label>');
                        
                        setTimeout(() => {
                            $('#login_btn').hide();
                            $('#ok_btn').show();
                        }, 3000);
                    } else {
                        $('#message').html(res);
                    }
                },
                error: function(xhr, status, error) {
                    console.log('AJAX Error:', error);
                    $('#message').html('<label class="label label-danger center-block">提交失败，请重试</label>');
                }
            });
        }
    });
});

2. 补充缺失的HTML元素 #

在表单中添加#ok_btn按钮：

<label class="label label-danger center-block" id="fillall" style="width:250px;height:20px;line-height:15px;font-size:13px;display:none;">Please Fill All Fields</label>
<button type="button" id="login_btn" class="btn btn-danger center-block" >Submit</button>
<!-- 添加OK按钮 -->
<button type="button" id="ok_btn" class="btn btn-success center-block" style="display:none;">确认</button>

3. 优化触摸事件支持（可选） #

如果修正后仍有触摸响应问题，同时绑定click和touch事件：

$(document).ready(function() {
    function handleSubmit(e) {
        e.preventDefault();
        // 原事件处理逻辑
    }

    $("#login_btn").on('click touchstart', handleSubmit);
});

调试技巧 #

• 开启手机浏览器开发者模式（Chrome安卓版可通过USB调试），查看控制台JS报错信息
• 检查网络请求，确认add_api.php是否正常响应
• 确保表单字段的ID与JS中的选择器完全匹配

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