获取jquery中动态添加的选择框和文本框的值

Question

我对 jQuery 很陌生，在这里我需要添加/删除一组文本框并通过单击按钮连续选择框。 添加时我必须用选项填充相同的选择框。 我已经通过以下代码实现了添加和删除。

============Add=================

var i = 1; 
$("‪#‎add‬").click(function() {
i++;
$(".normal-tble tbody tr:first").clone().find("select,input").each(function() {
var tempId = $(this).attr("id");
$(this).attr("id",$(this).attr("id")+"_"+(i))
var newID = $(this).attr("id");
}).end().appendTo("table");
});
=============Remove===============
$("table.normal-tble").on("click", "‪#‎remove‬", function (event) {
$(this).closest("tr").remove();
i -= 1
});
================code appending===================
<tbody>
<tr class="second">
<td style="text-align:left;"><form:select path="category" class="slt-tbl-small">
<form:option label="Select" value='0' />
<form:options itemLabel="categoryName" itemValue="category" items="${CategoryList}" />
</form:select>
</td>
<td style="text-align:left;"><form:select path="areaID" class="slt-tbl-small">
<form:option label="Select" value='0' />
</form:select>
</td>
<td style="text-align:left;"><form:select path="subAreaID" class="slt-tbl-small">
<form:option label="Select" value='0' />
</form:select>
</td>
<td style="text-align:left;"><form:input path="quantity" class="tfl-tbl-small"/></td>
<td style="text-align:left;"><form:input path="availableBlocks" class="tfl-tbl-small"/></td>
<td style="text-align:left;"><form:input path="utilization" class="tfl-tbl-small"/></td>
<td style="text-align:left;"><form:input path="blkNumComment" class="tfl-small"/></td>
<td style="text-align:left;"><img src="<c:url value="/resources/images/edit.png"/>" width="14" height="13" alt="edit"></td>
<td style="text-align:left;"><img src="<c:url value="/resources/images/edit.png"/>" width="14" height="13" alt="edit" id = "remove"></td>
<td></td>
</tr> 
</tbody>
==================Fetch Data=================
$(this).change(function() {
var value = $(this).val();//this value is not coming for dynamically added select box.
});
});
===================================

基于第一个选择框更改，我必须在其他选择框和文本框中填充值。 1.如何获取动态添加的选择框的值？ 2.克隆选择框和文本框后，即使它与以前的相同，也无法获取值和id。 3.是因为clone()吗？

请帮我解决这个问题

Answer 1

使 onchange 处理程序成为一个命名函数：

function onChange() {
    var value = $(this).val();
    //...
}
$(this).change(onChange);

然后在您的添加函数中，将相同的处理程序添加到新创建的元素：

$(".normal-tble tbody tr:first").clone().find("select,input").each(function() {
    ///...
    $(this).change(onChange);
}).end().appendTo("table");

关于您的其他问题：
您不应将两个事件处理程序都分配给您的 select+input+img。分开做，像这样：

var $row = $(".normal-tble tbody tr:first").clone();
$row.find("select,input").change(onChange); 
$row.find("img").click(onClick);
$row.appendTo("table");