ajax jquery添加数据问题

时间:2014-06-03 10:48:26

标签: jquery asp.net ajax web-services

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

这是按钮;

<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的Product Id,将其发送到webservice,然后通过这种方式将产品名称和内容添加到服务器。但问题是,当我点击转发器中的任何项目按钮时,它不会添加。我第二次点击它会增加2行。然后我点击另一个产品按钮,它会添加3行然后4行,就像这样。但我点击每个按钮1次。我该怎么做才能解决这个问题?

1 个答案:

答案 0 :(得分:0)

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

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

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

并删除按钮的OnClientClick属性(jQuery不需要您按下click事件):

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

委托事件在祖先监听,然后应用选择器,然后将该函数应用于生成事件的任何匹配元素。

首选是在DOM中使用第一个不变的祖先。如果失败(您没有显示页面的其余部分),您可以使用document接收页面上的所有冒泡事件。