Question

I have a page that contains a dropdown list, and when a user selects a options from the list, a ajax call is triggered and a series of checkboxes is created. Some are checked, some are not checked. I need to record if any changes are made to the checkboxes i.e. checked/unchecked. I tried using the the following, and nothing happened.

I am using jQuery version 1.7.1, btw.

$("input:checkbox").change(function(){ 
    //some stuff happens
});

I had an alert in there, but nothing is happening. So I tried wrapping it in a $(document).ready(... but again, nothing. So my guess was that, since they checkboxes haven’t been created when the DOM is ready, it has no tags to attached that action to.

So now I’m at a loss. I’m not sure, without putting onChange="someFunction()" into

.append("<input type='checkbox' id='" + theData.DATA + "' value='" + theData.DATA + "'>" + tempName + "<br />");

that is actually creating the checkboxes.

Any thoughts?

Answer 1

You are right and if you are using jQuery 1.7.. use .on as follow below syntax,

$(<closest_checkbox_container>).on('change', 'input:checkbox', function(){ 
    //some stuff happens
});

if you are using older versions then use .delegate,

$(<closest_checkbox_container>).delegate('input:checkbox', 'change', function(){ 
    //some stuff happens
});

Note: Where <closest_checkbox_container> is the closest checkbox container that is available when the DOM is ready.

The above method is called delegated events. Ref (Read the section under Delegated events)

Alternatively, It is better to write the $("input:checkbox").change(function(){ after you finished adding those checkbox. However it is better under the assumption that all checkbox is added only once.