Это было задано когда-то раньше, но я не могу понять проблему, глядя на ее решение.
Итак, у меня есть HTML и JQuery-код, который добавляет строки вроде этого:
$(document).ready(function () {
window.VendorDetail = '@Url.Action("GetQuoteVendorDetail", "Technical")'
window.SaveItemDetails = '@Url.Action("SaveItemDetails", "Technical")'
$('#divQuoteDetails').hide();
//1. Add new row
$("#addNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#lotTable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone();
var suffix = $trNew.find(':input:first').attr('name').match(/d+/);
$trNew.find("td:last").html('<a href="#" class="remove">Remove</a>');
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
$(this).attr('name', newN);
//Replaced value
var type = $(this).attr('type');
if (type.toLowerCase() == "text") {
$(this).attr('value', '');
}
// If you have another Type then replace with default value
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
// Re-assign Validation
//var form = $("form")
// .removeData("validator")
// .removeData("unobtrusiveValidation");
//$.validator.unobtrusive.parse(form);
});
// 2. Remove
$('.remove').on("click", "a", function (e) {
debugger;
e.preventDefault();
$(this).parent().parent().remove();
});
});
<div class="row">
<div class="col-md-12"><a href="#" id="addNew" class="btn btn-sm btn-info">Add Lot Details</a></div>
<table id="lotTable" class="table table-responsive table-hover">
<thead>
<tr class="bg-cyan">
<th>Lot Name</th>
<th>Lot Date</th>
<th>Lot Qty</th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.LotTable)
{
<tr>
<td>
<input name="LotName" id="LotName" type="text" value="@item.LotName" class="form-control" />
</td>
<td>
<input name="LotDate" id="LotWiseDate" type="text" value="@item.LotWiseDate" class="form-control NoEndDate forSingle" readonly="readonly" autocomplete="off" />
</td>
<td>
<input name="LotQty" id="LotWiseQty" type="text" value="@item.LotWiseQty" class="form-control" />
</td>
<td></td>
</tr>
}
</tbody>
</table>
</div>
Теперь проблема в том, что, хотя строки добавляются правильно, я не могу их удалить. Даже событие click не вызывает функцию Remove.
Всего 3 ответа
1. Вы должны прослушать событие, когда элемент DOM рендерится, переместив событие remove
onclick внутрь $("#addNew").click
как $("#addNew").click
ниже.
//$.validator.unobtrusive.parse(form);
// 2. Remove
$('.remove').on("click", function (e) {
console.log("Removed");
$(this).parent().parent().remove();
});
Прочитайте следующий пост, чтобы лучше понять.
Привязка событий к динамически создаваемым элементам?
2. Вы уже прослушали .remove
элемент, поэтому вам не нужно слушать on("click", "a",
снова.
$(document).ready(function () {
window.VendorDetail = '@Url.Action("GetQuoteVendorDetail", "Technical")'
window.SaveItemDetails = '@Url.Action("SaveItemDetails", "Technical")'
$('#divQuoteDetails').hide();
//1. Add new row
$("#addNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#lotTable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone();
var suffix = $trNew.find(':input:first').attr('name').match(/d+/);
$trNew.find("td:last").html('<a href="#" class="remove">Remove</a>');
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
$(this).attr('name', newN);
//Replaced value
var type = $(this).attr('type');
if (type.toLowerCase() == "text") {
$(this).attr('value', '');
}
// If you have another Type then replace with default value
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
// Re-assign Validation
//var form = $("form")
// .removeData("validator")
// .removeData("unobtrusiveValidation");
//$.validator.unobtrusive.parse(form);
// 2. Remove
$('.remove').on("click", function (e) {
console.log("Removed");
$(this).parent().parent().remove();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12"><a href="#" id="addNew" class="btn btn-sm btn-info">Add Lot Details</a></div>
<table id="lotTable" class="table table-responsive table-hover">
<thead>
<tr class="bg-cyan">
<th>Lot Name</th>
<th>Lot Date</th>
<th>Lot Qty</th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.LotTable)
{
<tr>
<td>
<input name="LotName" id="LotName" type="text" value="@item.LotName" class="form-control" />
</td>
<td>
<input name="LotDate" id="LotWiseDate" type="text" value="@item.LotWiseDate" class="form-control NoEndDate forSingle" readonly="readonly" autocomplete="off" />
</td>
<td>
<input name="LotQty" id="LotWiseQty" type="text" value="@item.LotWiseQty" class="form-control" />
</td>
<td></td>
</tr>
}
</tbody>
</table>
</div>
Попробуй это,
$("td").on("click", "a.remove", function(){
debugger;
e.preventDefault();
$(this).parent().parent().remove();
});
Основываясь на привязке события к динамически создаваемым элементам?
Вы также можете прослушать событие, как
$(staticAncestors).on(eventName, dynamicChild, function() {});
Тогда ваш JQuery выглядит так
// 2. Remove
$('#lotTable').on("click", '.remove', function (e) {
$(this).parent().parent().remove();
});
$(document).ready(function () {
window.VendorDetail = '@Url.Action("GetQuoteVendorDetail", "Technical")'
window.SaveItemDetails = '@Url.Action("SaveItemDetails", "Technical")'
$('#divQuoteDetails').hide();
//1. Add new row
$("#addNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#lotTable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone();
var suffix = $trNew.find(':input:first').attr('name').match(/d+/);
$trNew.find("td:last").html('<a href="#" class="remove">Remove</a>');
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
$(this).attr('name', newN);
//Replaced value
var type = $(this).attr('type');
if (type.toLowerCase() == "text") {
$(this).attr('value', '');
}
// If you have another Type then replace with default value
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
// Re-assign Validation
//var form = $("form")
// .removeData("validator")
// .removeData("unobtrusiveValidation");
//$.validator.unobtrusive.parse(form);
});
// 2. Remove
$('#lotTable').on("click", '.remove', function (e) {
$(this).parent().parent().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12"><a href="#" id="addNew" class="btn btn-sm btn-info">Add Lot Details</a></div>
<table id="lotTable" class="table table-responsive table-hover">
<thead>
<tr class="bg-cyan">
<th>Lot Name</th>
<th>Lot Date</th>
<th>Lot Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="LotName" id="LotName" type="text" value="@item.LotName" class="form-control" />
</td>
<td>
<input name="LotDate" id="LotWiseDate" type="text" value="@item.LotWiseDate" class="form-control NoEndDate forSingle" readonly="readonly" autocomplete="off" />
</td>
<td>
<input name="LotQty" id="LotWiseQty" type="text" value="@item.LotWiseQty" class="form-control" />
</td>
<td></td>
</tr>
</tbody>
</table>
</div>