jQuery获取data-variant-id属性返回undefined该怎么处理？

问题原因 #

你给按钮内部新增了<i>图标标签后，点击操作的实际触发目标（e.target）是内层的<i>元素而非外层绑定了data-variant-id的button元素，<i>标签上没有对应的自定义属性，所以读取值为undefined。

解决方案 #

直接修改事件回调中获取目标元素的逻辑即可，有两种常用实现方式：

• 用e.currentTarget替代e.target：e.currentTarget指向的是绑定了当前点击事件的元素，也就是你要取属性的外层button，不受内部子元素点击的影响。
• 直接用事件回调自带的this指向：jQuery的事件回调中，this默认指向绑定事件的DOM元素，直接读取即可，也可以搭配jQuery的data()方法书写为$(this).data('variant-id')。

修正后的JS代码示例 #

// 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();
    // 替换为e.currentTarget即可
    var button = e.currentTarget
    var variantId = button.dataset.variantId

    console.log('variantId', variantId);

    // Add Item to cart
    Shopify.addItem(variantId, 1, function() {
      refreshCart();
      $('[data-drawer-trigger]')[0].click();
    })
  })
})

内容的提问来源于stack exchange，提问作者Ryan Perez