on click event and pass value to function-CodePudding

I have an on click event that calls a function but it does not work:

@foreach (var item in Model.OrderDetails)
{
   <tr  id="@item.DetailId">
       <td  onclick="DeleteOrderDetail(@item.DetailId)"><a><span ></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

CodePudding user response：

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  onclick="DeleteOrderDetail('@item.DetailId')"><a><span ></span></a></td>

CodePudding user response：

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'); 
  });
});