jQuery數據$（...）。data（'foo'）有時在Backbone應用程序中返回undefined

Question

遇到一個奇怪的錯誤 - 所以我在我的HTML中的button elem上有一個屬性定義爲'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中。

任何想法？ Backbone可能會做些什麼？

Answer 1

問題是骨幹視圖使用事件委託來處理事件。這意味着e.target將是被點擊的元素，而不是響應事件的元素。如果您點擊<i>，e.target將是<i>，但如果您點擊文字，e.target將會是<button>; <i>沒有您要查找的數據屬性，但是<button>沒有。這意味着有時$(e.target).data('tagtype')將爲undefined。

你可以看到這種行爲在一個簡單的例子：

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

和最小的觀點：

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。