Jquery Click Event wird beim zweiten Klick ausgelöst, aber nicht zuerst

Question

Ich benutze ein Skript, das einige Produktdaten von einem JavaScript-Objekt erhält und es einem Warenkorb hinzufügt, der einer .click-Funktion zugewiesen ist.

Wenn ich zuerst auf die Schaltfläche klicke, um ein Produkt hinzuzufügen, passiert nichts. Wenn ich dann auf den Kaufknopf eines anderen Produkts klicke, fügt es das erste Produkt in den Warenkorb ein, und dann funktioniert es von dort, aber es fehlt ein Produkt.

Wenn ich das Skript auf pageload anstelle von .click ausführen - dann zeigt es alle Produkte korrekt.

Warum feuert das Skript nicht auf die erste .click?

Arbeits Fiddle: 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 Objekt:

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')"> 

Answer 1

Sie haben einen Knopf, ruft (a) kaufen() bei Klick. Sie binden aber auch einen Click-Event-Handler (b) an .actionbutton. Das Problem besteht darin, dass diese Ereignisse asynchron ausgelöst werden. Da (a) ein Ajax-Aufruf ist, sollte er länger dauern als (b) und daher (b) nicht die Daten in "retailerData" haben.

Anstatt 2 Ereignishandler zu binden, können Sie den einen Handler für beide verwenden. Zum Beispiel könnte buy() Daten laden und dann würde seine Callback-Funktion für das Rendern des Einkaufswagens verantwortlich sein.