CODEWITHSUNDEEP
javascriptjquerycheckboxonchange
Leonardo Ferreira
Leonardo Ferreira

Reputation: 106

Issue with checkbox onchange jquery

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.

Upvotes: 0

Views: 6641

Answers (4)

mohamedrias
mohamedrias

Reputation: 18566

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

Upvotes: 0

Ani
Ani

Reputation: 4523

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

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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.

Upvotes: 9

MaiKaY
MaiKaY

Reputation: 4482

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

Upvotes: 0

Related Questions