数据属性在 JQuery 中返回未定义答案

【问题标题】：Data attribute is returning undefined in JQuery数据属性在 JQuery 中返回未定义
【发布时间】：2021-09-01 23:33:49
【问题描述】：

这以前对我有用，但停止工作了。我正在尝试获取数据属性，以便可以通过 AJAX 添加到购物车。

更新：我的目标是从 data-variant-id 属性中获取数据，以便我可以通过 Shopify 的 AJAX API 添加到购物车。以前，我有一个按钮，上面写着“添加到购物车”，效果很好。突然，当我添加一个图标标签时，按钮停止工作。

这是sn-p：

// Fake Shopify
const Shopify = {
  addItem (id, qty, cb) {
    console.log("Shopify.addItem - id: %s, qty: %i", id, qty)
    setTimeout(cb, 200)
  }
}

const refreshCart = () => console.log("refreshCart")

$('[data-variant-id]').each(function() {
  $(this).on('click', function(e) {
    e.preventDefault();
    var button = e.target
    var variantId = button.dataset.variantId

    console.log('variantId', variantId);

    // Add Item to cart
    Shopify.addItem(variantId, 1, function() {

      // Now its added. lets refresh the cart drawer
      refreshCart();

      // Now its refreshed. Lets open the drawer
      $('[data-drawer-trigger]')[0].click();
    })
  })
})

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
[data-drawer-trigger] { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button data-variant-id="40173189300410" value="Add to Cart" class="btn-icon"><i class="fas fa-shopping-cart"></i></button>

<button data-drawer-trigger>Drawer Trigger Button</button>

【问题讨论】：

我们怎么知道它为什么停止工作？你刚刚添加了html，js谁已经在工作，请提供更多细节
我有阅读障碍，你能告诉我你还需要什么信息吗？
我在假设您使用jquery 3.0 的基础上编辑了您的帖子，那么您的代码似乎工作正常。如果版本不正确，请更新sn-p里面的jquery版本。
所以我更新了我的请求。经过测试，我发现如果我在按钮中放置一个图标，那么代码就不起作用
@RyanPerez 也是，我认为你的图标类应该是 fas fa-shopping-cart，不是 far fa-shopping-cart

标签： javascript jquery shopify

【解决方案1】：

var button = e.target

这是你的问题。

当您点击该按钮时，您很可能实际点击的是<i>，它是由e.target 标识的元素。

事件冒泡到触发您的事件处理程序的按钮，但随后您的<i> 没有任何data-* 属性，因此button.dataset.variantId 是undefined。

简单的解决方案是在绑定到event currentTarget（您添加处理程序的元素）的事件处理程序中使用jQuery 的this 绑定。你也不需要.each()

$('button[data-variant-id]').on("click", function(e) {
  e.preventDefault()
  const variantId = this.dataset.variantId // note `this`

  console.log('variantId', variantId);

  // Add Item to cart
  Shopify.addItem(variantId, 1, function() {

    // Now its added. lets refresh the cart drawer
    refreshCart();

    // Now it's refreshed. Lets open the drawer
    $('[data-drawer-trigger]').eq(0).click(); // using `.eq(0)` is safer
  })
})

另外，你的图标应该是

<i class="fas fa-shopping-cart"></i>

注意fas 类名，不是 far。

【讨论】：