Click on dynamically generated radio button

Question

i am trying to alert some text when a dynamically generated radio button is checked .. here is the link from fiddle .. http://jsfiddle.net/z7cu3q0y/

function createRadioButtons(n)
{
    $("#radioContainer").empty();
    for(var i=0;i<n;i++)
    {
        radioButtons = "<p><input type='radio' class='"+n+"' name='"+n+"'>"+(i+1)+"</p>";
        $("#radioContainer").append(radioButtons);
    }
}    

$("#dropDown").on("change",function()
{
      createRadioButtons(parseInt($(this).val()));
});

$("#radioContainer input").on("change",function()
{
      alert("checked");
});

when i click on radio button i am not getting alert .. can any one of you please help me in taking a look ?

Thanks in advance, Ashwin

Plenty of answers below, so I'll just explain things. The problem you're having comes from the fact that at the time you bind the event listener `$('#radioContainer input').on('change', ...)`, the radio button doesn't exist yet, so jQuery doesn't find it. The reason why the delegation answers below work is that you're binding the event listener to `#radioContainer`, which _does_ exist. Then when the click happens, you check to see if the clicked element was a radio button, which by this time does exist. — flowstoneknight, Sep 11 '14 at 06:47

T J · Answer 1 · 2017-10-11T15:27:36.920

Your code $("#radioContainer input").on("change",function(){}) will directly attach the event handler to the matching elements that are currently present in DOM.

To work with dynamically generated elements added in the future, You need to delegate your event handler to a common parent element:

$("#radioContainer").on("change","input",function(){
  alert("checked");
});

The above will attach the handler to #radioContainer, Whenever the corresponding event (change in this case)is triggered (Usually propagated from the children), it checks whether the event target matches the specified selector (input in this case) and invokes the handler accordingly.

Updated Fiddle

score 2 · Answer 2 · answered Sep 11 '14 at 06:42

2

You need to use .on() for dynamically generated elements like below. Here .on() will bind change event to all radio buttons which are inside radioContainer

$("#radioContainer").on("change","input[type=radio]",function()
{
      alert("checked");
});

Demo

answered Sep 11 '14 at 06:42

Bhushan Kawadkar

28,279
5
35
57

*Here .on() will bind change event to all radio buttons which are inside radioContainer* - not true. – T J Sep 11 '14 at 06:52

score 0 · Answer 3 · answered Sep 11 '14 at 06:42

0

Try using the below code

$(document).on("change","#radioContainer input",function(){
 alert("checked");
});

Updated fiddle

answered Sep 11 '14 at 06:42

karan3112

1,867
14
20

score 0 · Answer 4 · answered Sep 11 '14 at 06:44

You need to put the input defined as click area and radiocontainer as working area.

DEMO: http://jsfiddle.net/don/z7cu3q0y/3/

Just remove input before .on and put inside of the function.

jQuery:

function createRadioButtons(n)
{
    $("#radioContainer").empty();
    for(var i=0;i<n;i++)
    {
        radioButtons = "<p><input type='radio' class='"+n+"' name='"+n+"'>"+(i+1)+"</p>";
        $("#radioContainer").append(radioButtons);
    }
}    

$("#dropDown").on("change",function()
{
      createRadioButtons(parseInt($(this).val()));
});

$("#radioContainer").on("change", 'input', function()
                              {
                                  alert("checked");
                              });

Click on dynamically generated radio button

4 Answers4

Linked