Question

I am a newbie to jquery.
I have a checkbox

<label id="2p">
    <input type="radio" name="due" class="due"  value="2p" checked="yes" />
    <span class="testoCheckbox">2p</span>
</label>

dynamically appended to a div. Being appended after load, change or click event won’t be fired. I understood that the solution to catch the click on the checkbox must be in the “on” function but i can’t get the right syntax for it. Can someone help me please?

Answer 1

You may use on() to check for events on elements added dynamically this way:

$(document).on('change', '.due', function(event){

    // do your stuff

});

Whenever a change event is fired inside the document, if it matches .due selector, callback is fired.

You may want to narrow your selection for better performance:

$('#someDiv').on('change', '.due', function(event){

    // do your stuff

});

If you want to target all the checkboxes contained in #someDiv:

$('#someDiv').on('change', 'input[type="checkbox"]', function(event){

    // do your stuff

});