jquery中的动态表故障

Question

我有一个简单的表格结构，如下所示。

现在，当我想在指定行之后动态添加一行时，表出现故障并且单击事件停止工作。

当使用 .append(( 时，一切都按预期工作。 但是，当我尝试在指定位置添加一行时，请说 我单击第 2 行的"+"，这意味着，我必须在当前 2 和 3 之间添加一个新行。这是行不通的，最重要的是，点击事件停止响应。

$('tbody').on('click', 'input[type=button][class=add]', function() {
var $tr =
$(
"<tr>" +
"<td><input type='text'/></td>" +
"<td><input type='text'/></td>" +
"<td><input class='add' type='button' value='+'/></td>" +
"<td><input class='del' type='button' value='-'/></td>" +
"</tr>"
);
var index = $(this).closest('tr').index();
alert(index);
//$('tbody').append($tr);  //---> works perfectly
$('tbody').eq(index).after($tr); //---> Not working properly
/*
		click not responding for the newly added row.
*/
});
$('tbody').on('click', 'input[type=button][class=del]', function() {
$(this).closest('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>Ingredient</td>
<td>Measurement</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' />
</td>
<td>
<input type='text' />
</td>
<td>
<input class='add' type='button' value='+' />
</td>
<td>
<input class='del' type='button' value='-' />
</td>
</tr>
</tbody>
</table>

我还为它创建了一个jsfiddle。

Answer 1

代码中的$('tbody').eq(index).after($tr)实际上是在tbody之外添加新行。 您可以将其更改为$('tbody tr').eq(index).after($tr)

$('tbody').on('click', 'input[type=button][class=add]', function() {
var $tr =
$(
"<tr>" +
"<td><input type='text'/></td>" +
"<td><input type='text'/></td>" +
"<td><input class='add' type='button' value='+'/></td>" +
"<td><input class='del' type='button' value='-'/></td>" +
"</tr>"
);
var index = $(this).closest('tr').index();
alert(index);
//$('tbody').append($tr);  //---> works perfectly
$('tbody tr').eq(index).after($tr); //---> Not working properly
/*
		click not responding for the newly added row.
*/
});
$('tbody').on('click', 'input[type=button][class=del]', function() {
$(this).closest('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>Ingredient</td>
<td>Measurement</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' />
</td>
<td>
<input type='text' />
</td>
<td>
<input class='add' type='button' value='+' />
</td>
<td>
<input class='del' type='button' value='-' />
</td>
</tr>
</tbody>
</table>

Answer 2

您的问题在此行中：

$('tbody').eq(index).append($tr);

更改为：

$('tbody tr').eq(index).after($tr);

代码段：

$('tbody').on('click', 'input[type=button][class=add]', function(){
var $tr =
$(
"<tr>"+
"<td><input type='text'/></td>"+
"<td><input type='text'/></td>"+
"<td><input class='add' type='button' value='+'/></td>"+
"<td><input class='del' type='button' value='-'/></td>"+
"</tr>"
);
var index = $(this).closest('tr').index();
$('tbody tr').eq(index).after($tr);
});
$('tbody').on('click', 'input[type=button][class=del]', function(){
$(this).closest('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>Ingredient</td>
<td>Measurement</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type='text'/></td>
<td><input type='text'/></td>
<td><input class='add' type='button' value='+'/></td>
<td><input class='del' type='button' value='-'/></td>
</tr>
</tbody>
</table>