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

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

i am trying to alert some text when a dynamically generated radio button is checked .. here is the link from fiddle .. http://jsfiddle/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

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 11, 2014 at 6:37 Ashwin B ChandrappaAshwin B Chandrappa 1111 silver badge22 bronze badges 1

• Plenty of answers below, so I'll just explain things. The problem you're having es 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 Commented Sep 11, 2014 at 6:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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 mon 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

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

Try using the below code

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

Updated fiddle

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

DEMO: http://jsfiddle/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");
                              });