我使用jquery
创建动态添加和删除表<table>
...... // others table row here
</tr>
<tr>
<td></td>
<td></td>
<td>
<div class="col-md-10">
<div>
<table id="table1">
<tr>
<td>
@Html.TextBox("file", "", new { type = "file" })
</td>
<td>
@*<button type="button" class="delete_button" onclick="removeFiles()">Delete</button>*@
<a href="#" class="delete_button" onclick="removeFiles()">Delete</a>
</td>
</tr>
</table>
@*@Html.EditorFor(model => model.attachment, new { htmlAttributes = new { @class = "form-control" } })*@
</div>
<a href="#" onclick="addMoreFiles()">Add More</a>
</div>
</td>
</tr>
//这是我的剧本。
<script>
function addMoreFiles(){
$("#table1").append('<tr><td>@Html.TextBox("file", "", new { type = "file" })</td><td><a href="#" class="delete_button" onclick="removeFiles()">Delete</a></td></tr>')
}
function removeFiles() {
$("#table1").on("click", ".delete_button", function (e) {
alert("Deleted File");
e.preventDefault();
$(this).parents("tr").remove();
});
}
我能够通过点击&#34;添加更多&#34;来成功添加行。行动链接。 结果如下。
但是当我点击任何删除按钮时。 它将删除整个元素并变得如下图所示。 以黄色突出显示的部分缺失。
我想要的是,如果我点击第二个删除按钮,它将删除第二行而不是整个表。
任何人都知道我犯的错误是什么? 谢谢你的帮助
答案 0 :(得分:1)
问题是因为您使用过时的on*
事件属性附加了您的活动。这意味着函数中的this
引用不是您期望的那样。
要解决此问题,请使用不显眼的事件处理程序。由于您已经在页面中包含了jQuery,因此您可以通过以下方式实现这一目标:
$(function() {
$('.add').click(function(e) {
e.preventDefault();
$("#table1").append('<tr><td><input type="file" name="file" /></td><td><a href="#" class="delete_button">Delete</a></td></tr>')
});
$("#table1").on("click", ".delete_button", function(e) {
e.preventDefault();
$(this).closest("tr").remove();
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td></td>
<td>
<div class="col-md-10">
<div>
<table id="table1">
<tr>
<td>
<input type="file" name="file" />
</td>
<td>
<a href="#" class="delete_button">Delete</a>
</td>
</tr>
</table>
</div>
<a href="#" class="add">Add More</a>
</div>
</td>
</tr>
</table>
&#13;
请注意,这使HTML更清晰,更简洁。另请注意,为了代码段的目的,我将ASP控件转换为原生HTML,但这可以在您的工作代码中轻松更改。