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

Amr Elgarhy · Accepted Answer · 2010-03-15 13:41:23Z

9

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.

edited Mar 15, 2010 at 13:41

answered Mar 15, 2010 at 13:21

Amr Elgarhy

69.2k70 gold badges193 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Seaux Over a year ago

don't forget delegate, which is the mostly the same, but more efficient :-) For more info: net.tutsplus.com/tutorials/javascript-ajax/…

Amr Elgarhy Over a year ago

yes, you are right delegate is a very nice add to jquery starting from version 1.4

Barry Over a year ago

HI thanks for the reponse, yeah i missed the . but it still didnt work with live('change') but i changed to a click function and that works fine $(".EntitiesRadio").live('click', function() { $("#EntityID").val($(this).val()); $("#EntityType").val($("#lstEntityTypes :selected").text()); alert($("#EntityType").val()); }); thanks for the help all

joaorodr84 Over a year ago

Thanks a lot. It worked like a charm. I whish I could upvote you more than once! :P

sorpigal · Accepted Answer · 2010-03-15 13:26:26Z

1

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

answered Mar 15, 2010 at 13:26

sorpigal

26.3k8 gold badges60 silver badges78 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2010-03-15 13:35:36Z

0

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']")

answered Mar 15, 2010 at 13:35

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

1 Comment

Mark Schultheiss Over a year ago

and of course, use the $("input[name*='EntitiesRadio']") .live("change",function(){});

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related