Question

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

所以基本上我想添加像这样的Query函数：

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

它存在于forloop中，并为每个新行添加。 “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); 
});

说明：脚本会找到tr以id开头的任何node。这涵盖了所有动态生成的TR。进一步选择缩小到每个TR中的input元素，并为该元素注册change事件。在该更改事件中，您已经获得了该元素，因此您可以在那里轻松访问其值。

这是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); 
});

将JQuery功能添加到动态创建的单选按钮

1 个答案: