单击事件并将值传递给函数

Question

我有一个调用函数的点击事件，但它不起作用：

@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>
}

错误：未捕获的 ReferenceError：DeleteOrderDetail 未在 HTMLTableCellElement.onclick

处定义

上网一搜发现我必须使用addEventListener 但在这种情况下，我无法将 @item.DetailId 传递给函数

Answer 1

您有一些 syntax 错误。

您没有关闭函数的 }。

        function DeleteOrderDetail(orderDetailId) {
        debugger;
        $.get("/Account/RemoveCart?orderDetailId=" + orderDetailId,
            function () {
                $("#" + orderDetailId).hide('slow');
            });
         }

并且在这部分代码中，您应该在 ''.

中传递数据

 <td class="product-remove" onclick="DeleteOrderDetail('@item.DetailId')"><a><span class="ion-ios-close"></span></a></td>

Answer 2

我们已经在问题的评论中提到了您的语法问题

但是如果你这样做

$(".product-remove").on("click", function() { 
  const $parent = $(this).closest("tr"), detailId = $parent.attr("id");
  $.get(`/Account/RemoveCart?orderDetailId=${detailId}`,function()) {
    $parent.hide('slow'); 
  });
});

然后不需要内联处理程序或传递 ID

上面的代码将替换您发布的所有代码

如果动态添加细节，需要委托到最近的静态容器

$("#tableId").on("click",".product-remove", function() { 
  const $parent = $(this).closest("tr"), detailId = $parent.attr("id");
  $.get(`/Account/RemoveCart?orderDetailId=${detailId}`,function()) {
    $parent.hide('slow'); 
  });
});

单击事件并将值传递给函数

on click event and pass value to function

javascript

jquery

asp.net

asp.net-mvc

asp.net-core