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

Answer 1

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

Answer 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

Answer 3

Try using the below code

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

Updated fiddle

Answer 4

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