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&#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')">

【问题讨论】:

你能创建一个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 事件在第二次点击时触发,但不是第一次的主要内容,如果未能解决你的问题,请参考以下文章

jquery:怎么能阻止第二次点击click事件啊??

jQuery - 更改 iframe src 时仅在第二次单击时触发

Click事件监听器仅在第二次工作

jQuery 提交仅在第二次点击后工作

Jquery .remove() 仅在第二次点击时起作用

Jquery:我的课程在第二次通话期间不起作用