javascript - 为什么这个函数会触发三次？

Question

我有一个代码片段来跟踪“添加到购物车”按钮的三次点击。

如果您对我为什么这样写感到困惑，它位于弹出的“快速 View ”模式中。

准确地说 - 每次点击此部分都会触发三次:

$(".qlBtns").one("click", function() {

  mboxDefine('dynamicElement5', 'QuickViewAddToCartClicked');
  mboxUpdate('QuickViewAddToCartClicked', 'Clicked=Yess');

});

下面是完整的代码片段:

$(document).ready(function() {
  $(".quickview_btn").click(function() {

    var quickview_url = $(this).attr("href");
    var qvURL = $(this).attr("href");

    $(".quickview_btn").colorbox({
      href: qvURL,
      opacity: 0.6,
      onComplete: function() {

        $(".qlBtns").one("click", function() {
          mboxDefine('dynamicElement5', 'QuickViewAddToCartClicked');
          mboxUpdate('QuickViewAddToCartClicked', 'Clicked=Yess');
        });

      }
    });

    mboxDefine('dynamicElement', 'QuickViewPLPclicked');
    mboxUpdate('QuickViewPLPclicked', 'paramURL=' + quickview_url);
  });
});

Answer 1

你应该绑定(bind)事件

$(".qlBtns").on("click", function() {});

只有一次才能触发一次，因为您将事件绑定(bind)在另一个函数oncomplete回调中，所以事件可能是多次被绑定(bind)。您应该在 .colorbox 函数之外进行此绑定(bind)。如果您无法执行此操作，我建议您使用以下代码取消绑定(bind)并绑定(bind)事件。

$(".qlBtns").off("click").on("click", function() {});