單擊動態生成的單選按鈕

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