jQuery Access Dynamically Created Radio Buttons

Question

I have 3 radio buttons on my page. They are loaded by calling a jQuery function which returns the html ex:

<script type="text/javascript"><!-- 
 onSelectChange(4);
  -->

which call this function:

function onSelectChange(parm){

        $.post("func.php", {function_name : "song"},
            function(data){
                $("#list").html(data.song_html);
                }, "json");
} 

html returned looks like this:

<INPUT TYPE="radio" NAME="songs" VALUE="A">A
<INPUT TYPE="radio" NAME="songs" VALUE="B">B
<INPUT TYPE="radio" NAME="songs" VALUE="C">C
<INPUT TYPE="radio" NAME="songs" VALUE="D">D

Now I want to know when 1 one of these radio buttons is clicked so I have the following function:

 $("input[name='songs']").change( function() {
 alert($(this).val());

It never fires though - I think it has something to do with dynamically adding the controls because when I try the above on a static html page it fires as expected. Any ideas?

Answer 1

Use .live() when adding controls dynamically, like this:

$("input[name='songs']").live("change", function() {
  alert($(this).val());
});

This works differently, rather than finding elements and binding a change handler to them, it binds a handler on document which listens for the change event to bubble up...and this happens the same way, no matter when the element was added.

Answer 2

$("input[name=songs]").change( function() {
 alert($(this).val());
}

no apostrophe after name=