Jquery Click 事件在第二次点击时触发,但不是第一次
Posted
技术标签:
【中文标题】Jquery Click 事件在第二次点击时触发,但不是第一次【英文标题】:Jquery Click Event fires on second click but not first 【发布时间】:2016-10-24 00:25:21 【问题描述】:我使用脚本从 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')">
【问题讨论】:
你能创建一个stack snippet
或JSFiddle
@SandeepNayak 这有点难,因为该按钮有一个 ajax 函数可以将产品数据调用到变量中,但我在数据已经填充的地方添加了一个小提琴。但这当然会起作用。
【参考方案1】:
您有一个在点击时调用 (a) buy() 的按钮。但是您还在 .actionbutton 上绑定了一个单击事件处理程序 (b)。问题是这些事件是异步触发的。由于 (a) 是一个 ajax 调用,它应该比 (b) 花费更长的时间,因此 (b) 在“retailerData”中没有数据。
您可以对两个单击事件处理程序使用一个处理程序,而不是绑定 2 个单击事件处理程序。例如,buy() 可以加载数据,然后它的回调函数将负责渲染购物车。
【讨论】:
嗯,听起来不错。我该如何解决?我无法访问 ajax 调用 - 我只能使用 Jquery 或 Vanilla Js 来操作 DOM。 可以在 ajax 事件的“成功”回调上触发第二个事件。 我不确定什么 buy() 用于 ajax 请求,但 jQuery 将在完成时触发一个 ajax 事件。如果正在使用 jQuery,那么您应该能够使用 .ajaxComplete 拦截它。见api.jquery.com/ajaxcomplete以上是关于Jquery Click 事件在第二次点击时触发,但不是第一次的主要内容,如果未能解决你的问题,请参考以下文章