1

I read check/uncheck all checkboxes with jquery 1.10.2 and he mentioned not putting the function in the proper callback. I debugged in chrome dev tools and noticed the checkbox listeners don't get hit after I add a row using my other jquery function.

According to jquery "ready" docs, document.ready's callback gets triggered when the DOM is done loading. After adding a row through my jquery handler, the DOM has finished loading, that's how I see the new row. So to my understanding I should be able to have my checkbox listeners in the "ready" callback, no? Here is my code:

$(document).ready(function() {
        var i = 1;
        $("#add_row").click(function() {
            $('#addr' + i).html("<td><input type='checkbox' class='form-control case'></td>"  + 

                                "<td><input name='name" + i + "' type='text' placeholder='Name' " +
                                "class='form-control input-md'></td>" +

                                "<td><input name='mail" + i + "' type='text' placeholder='Mail' " +
                                "class='form-control input-md'></td>"

                                );

            $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
            i++;
        });

        $("#delete_btn_" + i).click(function(event) {
            if (i > 1) {
                $("#addr" + (i - 1)).html('');
                i--;
            }
        });


        // add multiple select / deselect functionality
        $("#selectall").click(function () {
            $('.case').prop('checked', this.checked);
        });

        /* Listen to any checkbox.  After one is toggled,
           if all checkboxes are selected, select the checkall checkbox
           otherwise checkall checkbox shouldn't be checked */
        $(".case").click(function() {
            if($(".case").length == $(".case:checked").length) {
                $("#selectall").prop("checked", "checked");
            } else {
            $("#selectall").removeProp("checked");
            }
        });

    });
Community
  • 1
  • 1
HukeLau_DABA
  • 2,384
  • 6
  • 33
  • 51
  • why cant i answer my own question? I discovered the error wasn't just in the "click" vs "on" event binding. There's something else you need for it to work. – HukeLau_DABA Jun 20 '14 at 23:35

1 Answers1

0
    $("body").on('change','.case',function() {
        if($(".case").length == $(".case:checked").length) {
            $("#selectall").prop("checked", "checked");
        } else {
            $("#selectall").removeProp("checked");
        }
    });
Exlord
  • 5,009
  • 4
  • 31
  • 51