[英]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.