document.addEventListener(“click”) 無法正常工作

Question

<button type="button" data-ab-testing="{{ settings.enabletest }}" class="Cart__Checkout Button Button--primary Button--full">
    <span>{{- 'cart.general.checkout' | t -}}</span>
    <span class="Button__SeparatorDot"></span>
    <span data-money-convertible>{{ cart.total_price | money_with_currency }}</span>
</button>

這是一個 shopify 按鈕。 它就像一個常規按鈕，添加了一些額外的東西以使其動態用於模板目的。 出於某種原因，下面的 Javascript 在按鈕上不起作用。

  var addToCartButton = document.querySelector("[data-ab-testing]");
  console.log(addToCartButton);
  var cartForm = document.querySelector(".Drawer__Content");
  addToCartButton.addEventListener("click", function(e) {
    if (addToCartButton.dataset.abTesting === "true") {
      console.log("true");
    }
  }, false);

假設dataset.abTesting === "true"已經被檢查（甚至完全刪除以查看這是否是問題）是否有任何理由不會觸發？ 我什至已經確認事件偵聽器實際上已附加到事件。 作為開發人員，Google Chrome 在過去幾天一直存在問題，我想知道它的 Chrome 是否以某種方式出現問題。 幾天前，該代碼的一個版本在我的同行計算機上運行，我完全不知所措。 我嘗試添加e並添加e.preventDefault()以及刪除事件偵聽器上的最后一個 false 。 我即將命名 function 並將其直接添加到按鈕（ onclick="funcName" ），但即使這不是我想要這樣做的事實，我也很好奇為什么會這樣t 正常工作。

Answer 1

既然您提到此按鈕是動態的，請閱讀此問題並查看是否有幫助：

那個stackoverflow問題是指事件委托和冒泡，這可能是值得一看的東西。 讓我知道它是否不起作用。