jQuery更改只能工作两次

Question

我构建了一个与复选框一起使用的过滤器。当我选中一个框时，div(表单结果(会随着结果而变化。

问题是结果在我选中一个框后只更改前 2 次，之后我必须刷新页面，否则查询不再执行任何操作。

我希望问题清楚了。

$(document).ready(function() {
$("input").on('change', function() {
var myform = document.getElementById("search");
var fd = new FormData(myform );
$.ajax({
url: "update.php",
data: fd,
cache: false,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
$(".form-result").html(data);     
}
});
}); 
}); 

输入工作一段时间：

<form enctype="multipart/form-data" method="post" name="search" id="search">
<input type="checkbox" value="'.$menu['color'].'" '.((isset( $_SESSION['input'] ['color'][$nr1]))?' checked':"").' class="css-checkbox2" name="color['.$nr1.']" id="'.$nr1.'"  />
</form>

有没有人可以帮助我走上正轨？

提前谢谢。

Answer 1

添加 3 行，它应该会让你知道它失败的原因：

如果你继续得到(1(，那么形式很好。然后从(2(和(3(中，您可以更多地了解为什么您看到它只工作两次，或者可能超过两次，但您在屏幕上看不到某些事情。

$(document).ready(function() {
$("input").on('change', function() {
console.log("1. checkbox on change", Date());
var myform = document.getElementById("search");
var fd = new FormData(myform );
$.ajax({
url: "update.php",
data: fd,
cache: false,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
console.log("2. ajax success", data);
$(".form-result").html(data);     
},
error: (x, s, e) => console.log("3. error", s, e)
});
}); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form enctype="multipart/form-data" method="post" name="search" id="search">
<input type="checkbox" value="'.$menu['color'].'" '.((isset( $_SESSION['input'] ['color'][$nr1]))?' checked':"").' class="css-checkbox2" name="color['.$nr1.']" id="'.$nr1.'"  />
</form>