Jquery ON function firing only once or twice only on ajax load

Question

I find it weird that the .on() function is firing the event only once/twice upon ajax load.

Here's a sample code:

$(document).on('click', '.cbxCheckAll', function(e) {
alert(this.checked);
$(this).parents('table').find('input.cbxDelete:checkbox').attr('checked', this.checked);
});

Scenario: So basically, I have a dropdown that has a list of users. Upon selecting a user on the dropdown, it instantly loads the selected user's info on a div via ajax. Then on that div, I have multiple checkboxes with a "select all" option.

Upon clicking the "select all", it did select all checkboxes. Another click, it did unchecked checkboxes. Well, it did work. But when I click again (for the 3rd time), it's not working anymore. It seems to be that it only works on the 2nd click.

As you may notice, I have an alert() that displays the value of the "select all" checkbox. It seems to fire everytime I click on it (3rd, 4th, etc.) but the checking/unchecking part is not.

I just recently updated my Jquery version to the lastest (1.9). I was using the ver (1.7) with the .live() function and changed it to .on() since the .live() was removed on the latest.

Thanks in advance!

Answer 1

You have to use .prop() in recent versions of jQuery when dealing with the checked property.

$(document).on('click', '.cbxCheckAll', function(e) {
    //alert(this.checked);
    console.log(this.checked);
    $(this).parents('table').find('input.cbxDelete:checkbox').prop('checked', this.checked);
});