添加JQuery功能来动态创建单选按钮

Question

我目前正在试图添加一个jQuery函数到一排单选按钮。问题是我需要动态添加多行。现在，在这个例子中，我只在newNodes数组中添加了2个元素，但在我的应用程序中，newNodes可能有许多不同的大小。

所以基本上我想添加的查询功能是这样的：

$('#rowID input').on('change', function() { 
    alert($('input[name=i]:checked', '#rowID').val()); 
}); 

如果它存在的for循环中，并添加每个新行。 “rowID”是分配给唯一行标识符的变量，然后使用循环迭代器“i”来区分每行的单选按钮。

下面是HTML：

<form id="createEdges" method="POST> 
    <fieldset> 
     <legend class="title">Modify the graph!</legend> 
     <table id="createEdgesTable"> 
     </table>  
     <input type="button" class="btn btn-default" id="backToThirdForm" onclick="goBackToForm3()" value="Back"/> 
    </fieldset> 

这里是JavaScript：

newNodes = []; 
newNodes.push(0); 
newNodes.push(1); 

//get HTML Table to add rows in 
var edgeTable = document.getElementById("createEdgesTable"); 
//Create a table row for each node 
    for (var i in newNodes) { 
     var row = edgeTable.insertRow(); 
     row.id = "node" + i; 

     //Show name of the node 
     var td = document.createElement('td'); 
     var text = document.createTextNode(newNodes[i]); 
     td.appendChild(text); 
     row.appendChild(td); 

     //Choice for showing node 
     var td2 = document.createElement('td'); 
     var radioButton1 = document.createElement('input'); 
     radioButton1.type = "radio"; 
     radioButton1.name = i; 
     radioButton1.value = "showNode"; 
     td2.appendChild(radioButton1); 
     row.appendChild(td2); 

     //Choice for creating edge 
     var td3 = document.createElement('td'); 
     var radioButton2 = document.createElement('input'); 
     radioButton2.type = "radio"; 
     radioButton2.name = i; 
     radioButton2.value = "createEdge"; 
     td3.appendChild(radioButton2); 
     row.appendChild(td3); 

     //Choice for deleting node 
     var td4 = document.createElement('td'); 
     var radioButton3 = document.createElement('input'); 
     radioButton3.type = "radio"; 
     radioButton3.name = i; 
     radioButton3.value = "removeNode"; 
     td4.appendChild(radioButton3); 
     row.appendChild(td4); 

     var rowID = row.id; 


    } 

$('#node0 input').on('change', function() { 
    alert($('input[name=0]:checked', '#node0').val()); 
}); 

的jsfiddle：https://jsfiddle.net/nxexrq9y/

如何使这项工作的每一行任何的例子吗？我对JQuery相对来说比较陌生，现在已经陷入这个问题很长一段时间了。感谢您的时间和帮助！

Answer 1

只需使用以下代码更改您的脚本。

$('tr[id^=node] input').on('change', function() { 
    alert(this.value); 
}); 

说明： 脚本找到node任何tr其id开始。这涵盖了所有动态生成的TR。进一步的选择在每个TR中缩减为只有input元素，并且注册该元素的改变事件。在那个变化事件中，你已经获得了这个元素，所以你可以很容易地访问它的价值。

这里是Js Fiddle Link

另外，如果你想知道点击无线电落在哪个节点，你可以检查出this js fiddle。

$('tr[id^=node] input').on('change', function() { 
    var row = $(this).parents('tr:first').get(0); 
    alert('Node: '+ row.id+ ' value:' + this.value); 
});