我在我的网站上使用 Flask，并且希望按钮能够在不重新加载 url 的情况下进行渲染，因此我随意复制了一些 JQuery/AJax 代码，虽然它在桌面上效果很好，但它在移动设备上给我带来了问题。这些按钮不会改变移动设备上的值。我将单击的值提交到我的 Flask 模块，并返回值以根据单击的内容更新按钮。 这是我的代码，从我提交的表单开始直到脚本结束：
<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>
</div>
</div>
</form>
</header>
<!-- 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(); // Prevent the form from submitting in the traditional way
var selectedSong = $(document.activeElement).val();
// Get the form data
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) {
// Redirect to the specified URL
console.log("REDIRECT TRIGGERED");
window.location.href = response.redirect_url;
return; // Add a return statement to exit the function after redirection
}
// Check if redirect_url exists in the response
else {
// Continue with your existing logic
console.log("Updating buttons...");
// Check if compare_songs exists and is an array
if (Array.isArray(response.compare_songs) && response.compare_songs.length >= 2) {
// Assuming you have button IDs 'button1' and 'button2'
$('#button1').val(response.compare_songs[0]);
$('#button2').val(response.compare_songs[1]);
$('#pic1').val(response.images[0]);
$('#pic2').val(response.images[1]);
console.log("Buttons updated!");
} else {
console.error("Invalid or missing compare_songs in the response");
}
}
// Check for a 302 status code
if (xhr.status === 302) {
// Extract the new URL from the headers
var newUrl = xhr.getResponseHeader('Location');
// Use the following line only if you want to redirect using a GET request
window.location.href = newUrl;
}
},
});
});
});
</script>
我已经尝试了互联网上关于 on.click 方法的一些建议，但一定是错误的实现。如果不坐下来学习一门全新的语言，不知道从这里该去哪里（我想我最终应该这样做......）
在移动浏览器（或触摸屏）上，浏览器根据用户触摸事件模拟“点击”。但是，有时浏览器可能会错误地模拟点击，并且可能不会触发提交功能。您可以尝试在用户触摸提交按钮时显式处理表单提交：
$(document).on('click touchstart', '#button1, #button2', function(event) {
// submit function
});
此外，如果您想更改 img 元素的
srcpropval$('#pic1').prop('src', response.images[0]);
$('#pic2').prop('src', response.images[1]);