移动端jQuery/Ajax表单提交异常：按钮值无法更新求助

我用Flask搭建网站，为实现按钮点击后无需刷新URL即可更新内容的功能，参考了一段jQuery/Ajax代码。这段代码在桌面端运行正常，但在移动端出现问题：点击按钮后，按钮值无法更新。

我的逻辑是：将点击的按钮值提交到Flask后端，后端返回新值，前端用这个新值更新按钮。我尝试过网上关于on.click方法的解决方案，但可能是实现方式有误，目前不知道该怎么解决，总不能专门去系统学习相关技术。

以下是我的代码（从表单部分到脚本末尾）：

HTML结构 #

<body id="page-top">
    <header class="masthead">
        <div class="text-center">
            <h6 class="text-white-50 mx-auto mb-3">Which song is better?</h6>
            <div class="container mt-5">
                <form id="songForm" data-sb-form-id="none" autocomplete="off">
                    <div class="row">
                        <div class="col-6 mb-3">
                            <img id="pic1" src="{{images[0]}}" class="img-fluid"/>
                            <input autocomplete="off" id="button1" type="submit" value="{{playlist_tracks[0]}}" class="btn text-wrap btn-primary mt-3 button-smaller" name="song"/>
                        </div>
                        <div class="col-6 mb-3">
                            <img id="pic2" src="{{images[1]}}" class="img-fluid"/>
                            <input autocomplete="off" id="button2" type="submit" value="{{playlist_tracks[1]}}" class="btn text-wrap btn-primary mt-3 button-smaller custom-button" name="song"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </header>

jQuery/Ajax脚本 #

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
    $(document).ready(function () {
        $("#songForm").submit(function (event) {
            console.log("Form submitted!");
            console.log("{{id}}");
            event.preventDefault();  // 阻止表单传统提交方式
            
            var selectedSong = $(document.activeElement).val();
            // 构造表单数据
            var formData = new FormData();
            formData.append('song', selectedSong);

            $.ajax({
                data: formData,
                url: "{{id}}",
                processData: false,
                contentType: false,
                type: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function (response, status, xhr) {
                    console.log("Form Data:", formData);
                    console.log("Response:", response);
                    
                    if (response.redirect_url) {
                        // 跳转到指定URL
                        console.log("REDIRECT TRIGGERED");
                        window.location.href = response.redirect_url;
                        return;  // 跳转后退出函数
                    } else {
                        // 执行更新逻辑
                        console.log("Updating buttons...");

                        // 检查返回的compare_songs是否为有效数组
                        if (Array.isArray(response.compare_songs) && response.compare_songs.length >= 2) {
                            // 更新按钮和图片内容
                            $('#button1').val(response.compare_songs[0]);
                            $('#button2').val(response.compare_songs[1]);
                            $('#pic1').attr('src', response.images[0]);
                            $('#pic2').attr('src', response.images[1]);
                            console.log("Buttons updated!");
                        } else {
                            console.error("Invalid or missing compare_songs in the response");
                        }
                    }

                    // 处理302重定向
                    if (xhr.status === 302) {
                        var newUrl = xhr.getResponseHeader('Location');
                        window.location.href = newUrl;
                    }
                },
            });
        });
    });
</script>

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