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

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

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

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

Answer 2

好的，问题是您正在更改ID，然后只更改第一个ID输入 - 更改为类，一切都很好 - 请参阅下面的代码段：

Updated Fiddle

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

＆＃13;

$(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();
 
     });
  });

＆＃13;

<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>

＆＃13;

Answer 3

请尝试此代码

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

Answer 4

用

替换Categroy侦听器

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

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

4 个答案: