Jquery Click 2回目のクリックでイベントが発生する

Question

javascriptオブジェクトから製品データを取得し、.click関数に割り当てられたバスケットに追加するスクリプトを使用します。

最初にボタンをクリックして商品を追加すると、何も起こりません。別の商品の購入ボタンをクリックすると、最初の商品がバスケットに追加され、そこからは動作しますが、1つの商品が欠落しています。

.clickの代わりにpageloadのスクリプトを実行すると、すべての製品が正しく表示されます。

最初に.clickにスクリプトが起動しないのはなぜですか？

ワーキングフィドル：https://jsfiddle.net/hszxbmrx/13/

スクリプト：

$(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オブジェクト：

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" 
    }] 
    } 
} 

はボタン：

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

Answer 1

あなたが呼び出すボタンがあります（a）クリックでbuy（）。しかし、あなたはまた、クリックイベントハンドラ（b）を.actionbuttonに束縛します。問題は、これらのイベントが非同期的に発生することです。 （a）はajax呼び出しであるため、（b）よりも時間がかかるため、（b）のデータは「retailerData」にありません。

2つのクリックイベントハンドラをバインドする代わりに、両方のハンドラを使用できます。たとえば、buy（）がデータをロードした後、そのコールバック関数がカートのレンダリングを担当します。