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.