如何将javascript函数应用于多个同名输入字段

Question

请帮助我想在输入列表中应用 javascript。 这就是我现在所拥有的。当我单击选择列表中的项目时，输入文本框将自动填充并且它现在正在工作但是当我使用 jquery 添加输入文本框时，我在选择列表中使用的 javascript 不会应用于新输入。它仅适用于第一个选择，即原始列表。 我应该怎么做才能将它应用于所有选择列表？ 点击此link 获取示例

$(document).ready(function() {
    $("#category").change(function () {
        var unit = $(this).find(':selected').data('number');
        $('#numbervalue').val(unit);
    });

    var counter = 2;
    $("#addNumber").click(function () {
        var newTextBoxDiv = $(document.createElement('tr')).attr("id", 'TextBoxDivMat' + counter);

        newTextBoxDiv.after().html('<td><select id="category"><option data-number="1" value="One">One</option><option data-number="2" value="Two">Two</option><option data-number="3" value="Three">Three</option></select></td><td><input id="numbervalue" type="text"></td>');
        newTextBoxDiv.appendTo("#TextBoxesGroupMat");
        counter++;
    });
    $("#removeButtonMat").click(function () {
        counter--;
        $("#TextBoxDivMat" + counter).remove();
    });
});

<table id="TextBoxesGroupMat">
    <thead>
        <tr>
            <th>Word</th>
            <th>Number</th>                                        
        </tr> 
    </thead>
    <tbody id="TextBoxDivMat1"> 
        <tr>
            <td>
                <select id="category">                                       
                    <option data-number="1" value="One">One</option>
                    <option data-number="2" value="Two">Two</option>
                    <option data-number="3" value="Three">Three</option>
                </select>
            </td> 
            <td><input id="numbervalue" type="text"></td> 
        </tr>
    </tbody>        
</table>
<button id="addNumber">+ add number</button>
<button id="removeButtonMat">remove</button>

Answer 1

好的，问题是您正在更改一个 ID，然后它只会更改第一个 ID 输入 - 更改为类，一切都很好 - 请参见下面的 sn-p：

Updated Fiddle

此外，如果没有空白选项，则在选择时使用 on change 是个坏主意 - 用户必须先选择 two 才能返回并选择 one

$(document).ready(function() {

$(document).on("change", ".category", function () { /* changed to class */
    var unit = $(this).find(':selected').data('number');
    $(this).parent().next().find('.numbervalue').val(unit); /* ugly but works, could be better */
});

var counter = 2;
$("#addNumber").click(function () {
var newTextBoxDiv = $(document.createElement('tr'))
	     .attr("id", 'TextBoxDivMat' + counter);
 
/* changed to add select and input with classes not IDs */	
newTextBoxDiv.after().html('<td><select class="category"><option data-number="1" value="One">One</option><option data-number="2" value="Two">Two</option><option data-number="3" value="Three">Three</option></select></td><td><input class="numbervalue" type="text"></td>');
newTextBoxDiv.appendTo("#TextBoxesGroupMat");
counter++;
     });
$("#removeButtonMat").click(function () {
counter--;
 $("#TextBoxDivMat" + counter).remove();
 
     });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TextBoxesGroupMat">
                                    <thead>
                                    <tr>
                                        <th>Word</th>
                                        <th>Number</th>                                        
                                    </tr> 
                                    </thead>
                                    <tbody id="TextBoxDivMat1"> 
									<tr>
                                    <td><select class="category">                                       
									   <option data-number="1" value="One">One</option>
                                       <option data-number="2" value="Two">Two</option>
                                       <option data-number="3" value="Three">Three</option>
									   </select></td> 
                                     <td><input class="numbervalue" type="text"></td> 
                                        </tr>
                                    </tbody>        
</table>

<button id="addNumber">+ add number</button>
<button id="removeButtonMat">remove</button>

Answer 2

如果您将新元素添加到 HTML 文档中，则需要再次将事件附加到新添加的元素。添加新元素后，您可以调用该函数。但是当您使用 ID 时，jQuery 很可能会将函数附加到具有该 ID 的第一个元素。如果你想对一堆元素使用相同的函数，那么你可以使用类标识符。

// Using ID
$("#category").on("change", function() {
// Your code here
})

// using class
$(".category").on("change", function() {
// your code here
})`

Answer 3

将类别监听器替换为

$(document).on('change', "#category",function () {
    var unit = $(this).find(':selected').data('number');
    $(this).parent().parent().find('#numbervalue').val(unit);
});

Answer 4

请试试这个代码

$(document).on('change',"#category",function () {
var unit = $(this).find(':selected').data('number');
$(this).parent().parent().find('#numbervalue').val(unit);
});