jQuery change only works twice

Question

I have built a filter that works with checkboxes. When i check a box a div (form-result) changes with the results.

The problem is that the result only changes the first 2 times after i check a box, after that i have to refresh the page because otherwise the query doesn't do anything anymore.

I hope the problem is clear.

$(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);     
            }
        });
    }); 
});

Input works with a while:

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

Is there anyone that could help me to get on the right track?

Thanks in advance.

Are you overwriting the original checkbox element with a new one? jQuery only acts on elements in the DOM at the time your event handler initializes unless you use [event delegation](https://learn.jquery.com/events/event-delegation/). — isherwood, Jan 13 '20 at 22:18
Possible duplicate: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — isherwood, Jan 13 '20 at 22:18
check the network tab and see if something returned every time? — nonopolarity, Jan 13 '20 at 22:23

nonopolarity · Answer 1 · 2020-01-13T22:40:47.807

Add the 3 lines and it should give you some idea why it failed:

If you keep on getting (1), then the form is fine. Then from (2) and (3) you can get more idea as to why you see it working only two times, or maybe it is more than two times but you don't see something happening on screen.

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

jQuery change only works twice

1 Answers1