Javascript jQuery数据$（…）.data（'；foo'；）有时在主干应用程序中返回未定义的数据

遇到了一个奇怪的bug–因此我在HTML中的

按钮
元素上定义了一个属性“data tagtype”。当用户单击按钮时，将调用以下方法：

onClickTag: function(e) {
  if (!this.playerLoaded) {
    return false;
  }
  var type = $(e.target).data('tagtype');
  var seconds = this.getCurrentTime();
  console.log(type);
  if (type) {
    this.model.addTag({
      type: type,
      seconds: seconds
    });
  }
},

这在大多数情况下都有效，但由于某些原因，
type
对于（似乎）随机元素是未定义的。相应的HTML如下所示：

<button id="tag-love" class="tagger disabled" data-tagtype="love"><i class="fa fa-heart fa-fw"></i></button>
<button id="tag-important" class="tagger disabled" data-tagtype="important"><i class="fa fa-exclamation fa-fw"></i> Important</button>
<button id="tag-more" class="tagger disabled" data-tagtype="more"><i class="fa fa-ellipsis-h fa-fw"></i> More</button>
<button id="tag-confused" class="tagger disabled" data-tagtype="confused"><i class="fa fa-question fa-fw"></i> Confused</button>


重要的
更多
困惑的

这很奇怪，因为似乎不存在一个模式，当返回未定义的值时，返回未定义的值。有时它们都能工作，有时其中一个会在几秒钟内返回undefined，但如果我继续单击，它会返回正确的值

在调用这些方法之前，视图肯定会呈现/加载到DOM中

有什么想法吗？脊梁骨可能有什么作用吗
 问题在于主干视图使用事件委托进行事件处理。这意味着
e.target
将是单击的元素，而不是响应事件的元素。如果单击
，
e.target
将是
，但如果单击文本，
e.target
将是
；
没有您要查找的数据属性，但是
有。这意味着有时
$（e.target）.data（'tagtype'）
将是
未定义的

您可以在一个简单的示例中看到这种行为：

<div id="x">
    <button type="button" data-tagtype="love"><i>icon</i> text</button>
</div>

演示：

如果单击
图标
，您将在控制台中获得
未定义的爱情
，但如果单击
文本
，您将在控制台中获得
爱情

这个小演示还包含解决方案：使用
e.currentTarget
而不是
e.target

var V = Backbone.View.extend({
    el: '#x',
    events: {
        'click button': 'clicked'
    },
    clicked: function(ev) {
        console.log(
            $(ev.target).data('tagtype'),
            $(ev.currentTarget).data('tagtype')
        );
    }
});