繁体   English   中英

jQuery Click事件在第二次点击时触发,但第一次未触发

[英]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&#x2F;2GB&#x2F;80GB&#x2F;DVD&#x2F;14&#34;&#x2F;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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM