I have an on click event that calls a function but it does not work:
@foreach (var item in Model.OrderDetails)
{
<tr class="text-center" id="@item.DetailId">
<td class="product-remove" onclick="DeleteOrderDetail(@item.DetailId)"><a><span class="ion-ios-close"></span></a></td>
</tr>
}
@section Scripts
{
<script>
function DeleteOrderDetail(orderDetailId) {
debugger;
$.get("/Account/RemoveCart?orderDetailId=" + orderDetailId,
function () {
$("#" + orderDetailId).hide('slow');
});
</script>
}
error:Uncaught ReferenceError: DeleteOrderDetail is not defined at HTMLTableCellElement.onclick
A search on the internet revealed that I had to use a addEventListener
But in this case, I can not pass the @item.DetailId to the function
You have some syntax errors.
You did not close the } of your function.
function DeleteOrderDetail(orderDetailId) {
debugger;
$.get("/Account/RemoveCart?orderDetailId=" + orderDetailId,
function () {
$("#" + orderDetailId).hide('slow');
});
}
And in this part of your code, you should pass data in ''.
<td class="product-remove" onclick="DeleteOrderDetail('@item.DetailId')"><a><span class="ion-ios-close"></span></a></td>
We already mentioned your syntax issue in comments to the question
However if you do
$(".product-remove").on("click", function() {
const $parent = $(this).closest("tr"), detailId = $parent.attr("id");
$.get(`/Account/RemoveCart?orderDetailId=${detailId}`,function()) {
$parent.hide('slow');
});
});
Then NO need for inline handlers or passing IDs
the code above replaces ALL your posted code
If you add the details dynamically, you need to delegate to nearest static container
$("#tableId").on("click",".product-remove", function() {
const $parent = $(this).closest("tr"), detailId = $parent.attr("id");
$.get(`/Account/RemoveCart?orderDetailId=${detailId}`,function()) {
$parent.hide('slow');
});
});