Question

I have an ajax function that loads the content of 4 checkboxes as follows:

$.ajax({
url : some url..,
dataType : 'json',
success : function(data) {
    buildCheckboxes(data);
    },
error : function(data) {
            do something...
    }
});

build checkboxes methods does something like this:

function updateNotificationMethods(items) {
    var html = [];
    $.each(items, function(i, item) {
        htmlBuilder = [];
        htmlBuilder.push("<input type='checkbox' class='checkbox-class' name='somename' value='");
        htmlBuilder.push(item.id);
        htmlBuilder.push("'");
        htmlBuilder.push("/>&nbsp;");
        htmlBuilder.push(item.name);
        htmlBuilder.push("<br/><br/>")
        html.push(htmlBuilder.join(''));
    });
    $("#div").html(html.join(''));
}

i have also an event binder that should be triggered when checkbox value changes:

$(".checkbox-class").change(function() {
alert("change");
 });

it works if i have the checkboxes html in the source (i.e. static) as opposed to the set up i have here, where i dynamically load the data from server.

is there something i can do so that binding take place timely?

peace!

Answer 1

This is because the element is not present when you bind your handler.

Try this:

$( document ).on( 'change', '.checkbox-class', function() {
    alert("change");
});

Or if you are using an older version of jQuery (less than 1.7) …

$( '.checkbox-class' ).live( function() {
    alert("change");
});