[英]Jquery Click Event fires on second click but not first
我使用一個腳本,該腳本從javascript對象獲取一些產品數據,並將其添加到分配給.click
函數的購物籃中。
如果我首先單擊該按鈕以添加產品,那么什么也不會發生。 如果然后我單擊另一產品的購買按鈕,它將把第一個產品添加到購物籃,然后從那里開始工作,但是缺少一個產品。
如果我在pageload
而不是.click
上運行腳本,那么它將正確顯示所有產品。
為什么腳本無法在第一個.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')">
您有一個按鈕,單擊該按鈕將調用(a)buy()。 但是,您還可以在.actionbutton上綁定單擊事件處理程序(b)。 問題在於這些事件是異步觸發的。 由於(a)是ajax調用,因此它應該比(b)花費更長的時間,因此(b)在“ retailerData”中沒有數據。
除了可以綁定2 click事件處理程序之外,您還可以同時使用兩個處理程序。 例如,buy()可以加載數據,然后其回調函數將負責呈現購物車。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.