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

Question

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

  $(document).ready(function() {
    $("#Search").click(function() {
        var keyword = $('#keyWord').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

Answer 1

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.

Answer 2

$("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() {} );