Jquery Click事件在第二次单击时触发，但不是第一次触发

I use a script that gets some product data from a javascript object and adds it to a basket assigned to a .click function.

我使用一个脚本从javascript对象获取一些产品数据,并将其添加到分配给.click函数的篮子中。

If I first click on the button to add a product, nothing happens. If I then click on another product's buy button, it adds the first product to the basket, and then it works from there, but is missing one product.

如果我第一次点击按钮添加产品​​,则没有任何反应。如果我然后点击另一个产品的购买按钮,它会将第一个产品添加到购物篮中,然后从那里开始工作,但缺少一个产品。

If I run the script on pageload instead of a .click - then it show all the products correctly.

如果我在pageload而不是.click上运行脚本 - 那么它会正确显示所有产品。

Why does the script not fire on the first .click?

为什么脚本不会在第一个.click上触发?

Working Fiddle: https://jsfiddle.net/hszxbmrx/13/

工作小提琴:https://jsfiddle.net/hszxbmrx/13/

Script:

$(document).ready(function(){
    $(".actionbutton").on("click", function(e) {
        $.each(retailerData.order.items,function(i,v){//get the item 
            var div = $('<div class="cartcont">')
            div.append('</br>'+'<img class="cartcont" src="' + v.imageURI +'" /><span class="art">' + v.label + '</span></br><span class="part">' + v.artno + '</span><span class="basketqty">' + v.qty + '</span><span class="price">'+ v.price + '</span>')
            $('div#headercart ul.acdropdown .carttable').append(div)
        })

        var nameDiv = document.createElement("td");
        nameDiv.id = 'totalIncExa';
        var text3 = document.createTextNode(retailerData.order.orderSum);
        nameDiv.appendChild(text3)
        document.body.appendChild(nameDiv);
        $("td#totalIncExa").appendTo("tr.ordersum");

        var nameDiv = document.createElement("td");
        nameDiv.id = 'vatTotala';
        var text3 = document.createTextNode(retailerData.order.orderVat);
        nameDiv.appendChild(text3)
        document.body.appendChild(nameDiv);
        $("td#vatTotala").appendTo("tr.ordervat");

        var nameDiv = document.createElement("td");
        nameDiv.id = 'orderTotala';
        var text3 = document.createTextNode(retailerData.order.orderSum);
        nameDiv.appendChild(text3)
        document.body.appendChild(nameDiv);
        $("td#orderTotala").appendTo("tr.ordersumtotal");
    });
});

Javascript Object:

var retailerData = {
"del": {
    "zip": "",
    "city": ""
},
"user": {
    "country": "",
    "phone": "",
    "nbrOrders": 0,
    "isPunchOut": false,
    "name": "",
    "salesPerson": "",
    "customerNo": "",
    "email": ""
},
"order": {
    "shippingSum": 0.0,
    "shippingFormatSum": "\u20AC0",
    "orderno": "0",
    "orderFormatSum": "\u20AC130",
    "voucher": "",
    "orderFormatVat": "\u20AC27,30",
    "currencySymbol": "\u20AC",
    "currency": "EUR",
    "orderVat": 27.3,
    "orderSum": 130.0,
    "items": [{
        "imageURI": "\/imgr\/8c82380c-65f5-43aa-83ad-fae1215b5b39\/70\/70",
        "qtyAvail": 7,
        "price": 130.0,
        "qty": 1,
        "artno": "D630-T7100-GE-REF",
        "vat": 27.3,
        "formatVat": "\u20AC27,30",
        "id": "52307",
        "label": "D630 C2D-T7100/2GB/80GB/DVD/14"/NO COA WLAN",
        "category": "Computers - Notebooks",
        "formatPrice": "\u20AC130",
        "manufacturer": "Dell"
    }]
  }
 }

Button:

<input type="button" id="pl52307buy" class="actionbutton" value="Köp" onclick="buy(this, 52307, null, 'pl52307qty',null, '/ajax/buy')">

1 个解决方案

#1

You have a button which calls (a) buy() on click. But you also binding a click event handler (b) on .actionbutton. The issue is that these events fire asynchronously. Since (a) is an ajax call it should take longer than (b) and therefore (b) doesn't have the data in "retailerData".

你有一个按钮,在点击时调用(a)buy()。但是你也在.actionbutton上绑定了一个click事件处理程序(b)。问题是这些事件是异步触发的。由于(a)是ajax调用,它应该花费比(b)更长的时间,因此(b)没有“retailerData”中的数据。

Instead of binding 2 click event handlers you can use the one handler for both. For example, buy() could load data and then its callback function would be responsible for rendering the cart.

您可以为两者使用一个处理程序,而不是绑定2个单击事件处理程序。例如,buy()可以加载数据,然后其回调函数将负责呈现购物车。