I have a table with multiple checkbox inputs:

<form>
<table id="table">
    <tr>
      <td><input type="checkbox" value="1" class="someClass"></td>
      <td><input type="checkbox" value="1" class="someClass"></td>...

And some jquery that refreshes the table from another file when the box is checked/unchecked:

$(".someClass").on("change", function() {
        $('#edit').ajaxSubmit(); //Submitting the form with id "edit"
        $("#table").load("tablerefresh");
 });

My problem is that when I check/uncheck a box, the table will refresh only once, and it should do it every time I check/uncheck the box, I've looked everywhere and can't seem to find a solution. Any ideas?

I have a table with multiple checkbox inputs:

<form>
<table id="table">
    <tr>
      <td><input type="checkbox" value="1" class="someClass"></td>
      <td><input type="checkbox" value="1" class="someClass"></td>...

And some jquery that refreshes the table from another file when the box is checked/unchecked:

$(".someClass").on("change", function() {
        $('#edit').ajaxSubmit(); //Submitting the form with id "edit"
        $("#table").load("tablerefresh");
 });

My problem is that when I check/uncheck a box, the table will refresh only once, and it should do it every time I check/uncheck the box, I've looked everywhere and can't seem to find a solution. Any ideas?

• javascript
• jquery
• html

• You might want to try hooking on an element that is not going to be reload (e.g. <form> in your example) with an appropriate filter so it only handles the events from the checkbox. – billc.cn Commented Aug 21, 2013 at 11:32
• the .on should be executed on a parent element that doesnt change or document. – Patrick Evans Commented Aug 21, 2013 at 11:33
• You're code seems fine. Check this out. jsfiddle/LEukL Look at your console and see if maybe something is crashing your code and that's why it stops executing. – Daniel Wardin Commented Aug 21, 2013 at 11:34
• For some context to the other ments or answers, .on() has documentation about delegated events which you're supposed to use here. – millimoose Commented Aug 21, 2013 at 11:35

2 Answers 2

This is probably a matter of delegation, since #table doesn't change, use it as the scope, targeting .someClass inside:

$("#table").on("change", ".someClass", function() {
  $('#edit').ajaxSubmit(); //Submitting the form with id "edit"
  $("#table").load("tablerefresh");
});

Note:

You can also use delegate():

$("#table").delegate(".someClass", "change", function(){
  //Code
});

try this:

$(document).on("change", ".someClass" , function() {
        $('#edit').ajaxSubmit(); //Submitting the form with id "edit"
        $("#table").load("tablerefresh");
 });