Ajax调用仅适用于表的第一行,不适用于第二行或其他行

时间:2019-09-02 18:57:20

标签: c# jquery ajax model-view-controller

我想建立一个购物车。我遇到一个问题,其中ajax调用仅在第一行上起作用。

        $("#Quantity").click(function () {

            var idItem = $("#ItemId").val();
            var quantity = $("#Quantity").val();

            var json = { itemId: idItem, quantity: quantity };


            $.ajax({
                type: "POST",
                url: '@Url.Action("GetTotalPriceByItemId", "Home")',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(json),
                success: function (data) {

                    $("#TotalPrice").val(data.Total);


                }
            });

        });

1 个答案:

答案 0 :(得分:0)

HTML代码在这里将不胜感激。

我怀疑您为每个错误的元素使用了相同的ID“数量”。元素ID在整个HTML文件中应该是唯一的(只有一个元素可以具有此ID)。为了解决这个问题,在第一行中,数量元素可能具有ID“ Quantity_1”,总价格元素中可能具有ID“ TotalPrice_1”,在第二行中,您可能具有诸如“ Quantity_2”和“ TotalPrice_2”之类的ID。 “ #ItemId”也是如此。

然后您可以编写简单的js来添加onClick事件,例如

for (var i = 0; i < rows.length; i++) {
  $(('#Quantity_' + i)).click({row: i}, ajaxCallFunction);
}

function ajaxCallFunction(event)
{
  var row = event.data.row;
  var idItem = $(('#ItemId_' + row)).val();
  var quantity = $(('#Quantity_' + row).val();
  (rest of the code goes here)
  .
  .
  .
}

我希望这会有所帮助:)。