Issue with checkbox onchange jquery

Question

I'm struggling with a weird happening in my most recent code.

I have a dynamic generated list where each line contains a checkbox. My intention is that if checkbox changes and I get a confirmation, my database will be updated.

The thing is, it does work the first time I change. But the following attempts don't. But if I get the page refreshed, it works again the first time I change.

It has to be some javascript stuff.

$(':checkbox').change(function() {
    if (confirm("Does the status of this survey really changed?")) {
        variable = $(this).val();
        $.post( "handler.php", { handler: '18', value: variable}, location.reload());
    }
});

PS: Also alerted the 'variable' each time it triggers and the values are changing.

Could you guys please help me solve it out?

Thanks in advance.

EDIT: Thanks a lot for all the answers. What helped me out, besides the understanding of the event delegation, was that it works better with click event. I'm still gonna try to understand what's the point of triggering onchange at onblur but for the moment, keeping onchange didn't help me.

@A.Wolff http://stackoverflow.com/questions/5575338/what-the-difference-between-click-and-change-on-a-checkbox — Alex Char, May 20 '14 at 14:58

score 9 · Accepted Answer · answered May 20 '14 at 14:55

As you've mentioned that rows are generated dynamically, You need to use event delegation like this:

$(document.body).on("change",":checkbox", function() {
    if (confirm("Does the status of this survey really changed?")) {
        variable = $(this).val();
        $.post( "handler.php", { handler: '18', value: variable}, location.reload());
    }
});

Where $(document.body) OR $(document) is the container of your target element, you may use closest parent element/container instead of $(document.body) OR $(document).

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

I'm accepting this because of the explanation but the real issue is about how onchange works. — Leonardo Ferreira, May 20 '14 at 17:45

mohamedrias · Answer 2 · 2014-05-20T15:00:39.323

0

For dynamically created DOM elements :

$(':checkbox').on("change",function() {
    if (confirm("Does the status of this survey really changed?")) {
        variable = $(this).val();
        $.post( "handler.php", { handler: '18', value: variable}, location.reload());
    }
});

Much better would be:

 $(document.body).on("change", ":checkbox" ,function() { // you can replace with wrapping container ID
    if (confirm("Does the status of this survey really changed?")) {
        variable = $(this).val();
        $.post( "handler.php", { handler: '18', value: variable}, location.reload());
    }
});

edited May 20 '14 at 15:00

answered May 20 '14 at 14:54

mohamedrias

18,326
2
38
47

There is no element of type `document`, `document` is a object. So `$('document')` returns empty jQuery object – A. Wolff May 20 '14 at 14:58
Here your selector will target an element of type document with class body, you want instead: `$(document.body)` or `$('body')` or to really delegate it unregarding DOM ready or not: `$(document)` – A. Wolff May 20 '14 at 15:00

score 0 · Answer 3 · answered May 20 '14 at 14:54

0

you have to use .live() events (in newer versions .on())

for example

$(':checkbox').live('change', function () {
    if (confirm("Does the status of this survey really changed?")) {
        variable = $(this).val();
        $.post("handler.php", { handler: '18', value: variable}, location.reload());
    }
});

answered May 20 '14 at 14:54

MaiKaY

4,422
20
28

3

No, `live is dead` as for jQuery 1.9+. Use `.on()` delegating syntax or for older jQuery version, use `delegate()` which is anyway better than `live()` – A. Wolff May 20 '14 at 14:55
i know, i updated my answer. maybe he is using an older version ^^ – MaiKaY May 20 '14 at 14:56
I was updating my comment. In all case, don't use `live()` – A. Wolff May 20 '14 at 14:56

score 0 · Answer 4 · answered May 20 '14 at 14:57

Use$( "input:checkbox" ) Working Fiddle: http://jsfiddle.net/h3ar8/

 $(document).ready(function(){
   $('input:checkbox').change(function() {
      if (confirm("Does the status of this survey really changed?")) {
          variable = $(this).val();
          alert(variable);
        }
    });
 });

According to Jquery http://api.jquery.com/checkbox-selector/ You should be using $( "input:checkbox" )

Issue with checkbox onchange jquery

4 Answers4