javascript - jQuery数据$(…..data ('foo')有时在Backbone应用中返回undefined

遇到一个奇怪的错误–因此，我在HTML的button元素中将属性定义为“数据标签类型”。用户单击按钮时，将调用以下方法:

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>

这很奇怪，因为似乎没有一种模式可以确定何时返回未定义。有时它们全部正常工作，有时其中一个返回几秒钟未定义，但是如果我继续单击，它将返回正确的值。

在调用任何这些方法之前，肯定已将View渲染/加载到DOM中。

有任何想法吗？ Backbone 可能会做些什么吗？

最佳答案

问题在于， Backbone View 使用事件委托(delegate)进行事件处理。这意味着e.target将是被单击的元素，而不是响应事件的元素。如果单击<i>，e.target将是该<i>，但是如果单击文本，e.target将是<button>； <i>没有您要查找的data属性，但<button>有。这意味着有时候$(e.target).data('tagtype')将是undefined。

您可以在一个简单的示例中看到此行为:

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

和最小的 View :

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

演示:http://jsfiddle.net/ambiguous/pe77p/

如果单击<i>icon</i>，将在控制台中获得undefined love，但是如果单击text，则将在控制台中获得love love。

该小示例还包含解决方案:使用e.currentTarget而不是e.target。