Dynamically adding radio buttons using JQUERY and then hooking up the jquery change event to the generated radio buttons

i am adding collection of radio buttons to my page using jQuery below

  $(document).ready(function() {
    $("#Search").click(function() {
        var keyword = $('#开发者_如何学GokeyWord').val();
        var EntityType = $("#lstEntityTypes  :selected").text();

        var postData = { type: EntityType, keyWord: keyword };
        // alert(postData.VehicleType);
        $.post('/EntityLink/GetJsonEntitySearchResults', postData, function(GRdata) {
            var grid = '<table><tr><td>ID</td><td>Name</td><td></td>';
            for (var i = 0; i < GRdata.length; i++) {
                grid += '<tr><td>';
                grid += GRdata[i].ID;
                grid += '</td><td>';
                grid += GRdata[i].EntityName;
                grid += '</td><td>';
                grid += '<input type="radio" name="EntitiesRadio" value="' + GRdata[i].ID + '" />';
                grid += '</td></tr>';
            }

            grid += '</table>';

            alert(grid);

            $("#EntitySearchResults").html(grid);

            $("EntitiesRadio").change(function() {
                alert($("EntitiesRadio :checked").val());
                $("EntityID").val($("EntitiesRadio :checked").val());
                alert($("EntityID").val());
                $("EntityName").val($("#lstEntityTypes  :selected").text());
            });
        });

    });
    //
});

so when page loads there is not EntitiesRadio name range, so i tried to register the entitiesRadio change function inside the same search click method but it isnt registering. how do i get the change event to fire to update my hidden inputs

---

You can use the live event which will work automatically for any new created elements on the page.
http://api.jquery.com/live/

So you just need to add the following code once and it will apply to all new created elements:

$(".EntitiesRadio").live('change', function() {
    alert($(".EntitiesRadio :checked").val());
    $("#EntityID").val($(".EntitiesRadio :checked").val());
    alert($("#EntityID").val());
    $("#EntityName").val($("#lstEntityTypes  :selected").text());
});

also make sure you add "." before calling by class name and "#" before calling by Id, because seams you missed that in your code.

---

$("EntitiesRadio") will find nothing because there is no such tag. Use $("#EntitiesRadio") if you want to select by ID or $(".EntitiesRadio") to select by class.

Once the HTML is added to the page you can bind the change event to it. To make the change event bind automatically to new matching elements you can use the live API.

$(".EntitiesRadio").live('change', function() {} );

---

Just an observation but $("EntitiesRadio"). might better be $(".EntitiesRadio")? If they are classes, need to be $(".EntitiesRadio") and instead of name="EntitiesRadio" use class="EntitiesRadio"

If you want to use name="EntitiesRadio" you are going to have to use

$("input[name*='EntitiesRadio']")