ajax jquery添加数据问题

Question

您好，我在转发器中有产品，我想将它们添加到购物篮中

这是按钮；

<asp:Button ID="sepeteEkle" runat="server" Text="EklEPanpa" class="sepetat"  data-id=<%#Eval ("Id") %>    OnClientClick="sepet(); return false; " />

我运行这个脚本；

     function sepeteEkle(id) {

         var urunid = id;
         var GirenIp = $("#userId").val();
         $.ajax({
             dataType: "json",
             type: "POST",
             contentType: "application/json",
             url: "/Admin/WebService/Control.asmx/calistir",
             data: "{'urunid':'" + urunid + "','GirenIp':'" + GirenIp + "' }",
             success: function(){
                 $("#cartContent").load("MiniSepet.aspx #cartContent");
             },
             error: function () {
                 $("#cartContent").load("MiniSepet.aspx #cartContent");
             }
         });
         return false;
     }
     function sepet() {
         $(".sepetat").on("click", function () {
             var nId = $(this).data("id")
             sepeteEkle(nId);

         })
     }

这会发送到网络服务

[WebMethod]

    public void calistir(int urunid, string GirenIp)
    {
        using (Models.DermabonEntities db = new Models.DermabonEntities())
        {


            var productName = (from i in db.Product
                               where i.Id == urunid
                               select i.ProductName).FirstOrDefault();
            var productPrice = (from i in db.Product
                                where i.Id == urunid
                                select i.ProductPrice).FirstOrDefault();

            var productId = (from i in db.Product
                             where i.Id == urunid
                             select i.Id).FirstOrDefault();
            var productPic = (from i in db.Product
                              where i.Id == urunid
                              select i.ProductPicture).FirstOrDefault();

            var userIp = GirenIp;

            Basket create = new Basket();

            create.ProductName = productName;
            create.ProductId = productId;
            create.ProductPrice = productPrice;
            create.ProductPic = productPic;
            create.UserId = userIp;



            db.Basket.Add(create);
            db.SaveChanges();




        }

    }

所以我使用 ajax 获取产品 ID 以将其发送到 web 服务，然后通过这种方式将产品名称和内容添加到服务器。但问题是当我单击转发器中的任何项目按钮时，它不会添加。我的第二次点击它添加了 2 行。然后我点击一个不同的产品按钮，它添加了 3 行然后 4 行，它就像这样。但我为每个按钮单击 1 次。我应该怎么做才能解决这个问题？

Answer 1

简而言之，每次按下按钮时，您都会为每个带有class="sepetat" 的元素添加一个点击处理程序。这会导致在每个元素上一遍又一遍地添加新的处理程序，因此添加的行数会随着使用而增加。

您只需要连接一次委托事件处理程序：

     $(document).on('click', '.sepetat', function () {
         var nId = $(this).data("id")
         sepeteEkle(nId);
     });

并去掉按钮的 OnClientClick 属性（jQuery 不需要你推送点击事件）：

<asp:Button ID="sepeteEkle" runat="server" Text="EklEPanpa" class="sepetat"  data-id=<%#Eval ("Id") %> />

委托事件在祖先处侦听，然后应用选择器，然后将函数应用到生成事件的任何匹配元素。

首选是在 DOM 中使用第一个不变的祖先。如果做不到这一点（您不显示页面的其余部分），您可以使用document 接收页面上的所有冒泡事件。