jQuery изменение работает только дважды

Question

Я построил фильтр, который работает с флажками. Когда я отмечаю флажок, div (форма-результат) изменяется вместе с результатами.

Проблема заключается в том, что результат изменяется только первые 2 раза после того, как я установил флажок, после чего мне нужно обновить sh страницы, потому что в противном случае запрос больше ничего не делает.

Я надеюсь, что проблема ясна.

$(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>