jquery - How to trigger even on dynamic element?

Question

I have some radio buttons that created by ajax request using something like this:

document.getElementById("clientresult").innerHTML=xmlhttp.responseText;

The radio buttons are output from another file. How can I use $('input:radio').change() to trigger events on selecting these radio buttons?

Answer 1

This has been asked and answered many many times but here you go

For on() to work on events that yet don't exist, it needs binding to one that does that will be a parent of those future elements.

$(document).on('change', 'input:radio', function(){
    // whatever you want to happen
});

document is catch-all but I believe it's faster to bind to something with fewer nodes to search (if that's the right terminology) e.g.

<div id="clientresult">
    <!-- inputs will be created in here -->
</div>

$('#clientresult').on('change', 'input:radio', function(){
    // whatever you want to happen
});