单击动态生成的单选按钮

Question

我正在尝试检查动态生成的单选按钮时提醒一些文本..这是小提琴的链接.. 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");
});

当我单击单选按钮时，我没有收到警报。.你们中的任何一个可以帮助我看看吗？

在此先感谢，Ashwin

Answer 1

您的代码$("#radioContainer input").on("change",function(){})将事件处理程序直接附加到DOM中当前存在的匹配元素。

要使用将来添加的动态生成的元素，您需要将事件处理程序委派给一个公共的父元素：

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

上面的代码会将处理程序附加到#radioContainer ，每当触发相应的事件（ 在这种情况下为change ）（ 通常从子级传播 ），它都会检查事件目标是否与指定的选择器（在这种情况下为input ）匹配并调用处理程序相应地。

更新小提琴

Answer 2

您需要将.on()用于动态生成的元素，如下所示。 在此.on()会将change事件绑定到radioContainer内部的所有单选按钮

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

演示版

Answer 3

尝试使用以下代码

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

更新的小提琴

Answer 4

您需要将定义为单击区域的输入和将radiocontainer定义为工作区域。

演示： http : //jsfiddle.net/don/z7cu3q0y/3/

只需删除.on之前的输入并将其放在函数内部即可。

---

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