搞清楚這<span>標籤被點擊使用HTML5數據標籤

Question

我有類似以下情況的東西：

<div id="block"> 
    <span data-type="a">a</span> 
    <span data-type="b">b</span> 
    <span data-type="c">c</span> 
</div> 

上跨度的一個點擊時

，我想返回回數據類型。我試過了：

$('#block').on('click', function(event) { 
    var text = $('#block').data('type'); 
    return text; 
}); 

但是它總是回來，因爲未定義。任何想法爲什麼這是發生/正確的解決方案是什麼？謝謝

Answer 1

這是因爲你的div #block沒有data-type標籤，但span沒有。因此，處理跨度上的點擊事件。

$('#block span').on('click', function(event) { 
    var text = $(this).data('type'); 
    console.log(text); 
}); 

Answer 2

您可以使用attr()：

$('#block').on('click', 'span', function(event) { 
    var text = $(this).attr('data-type'); 
    console.log(text); 
}); 

Demo

Answer 3

看起來像它在其心不是那裏的DIV的數據類型元素檢查，

，你可以添加一個處理程序爲每個跨度查看哪個被點擊。

如

$('#block span').on('click', function(event) { 
    var text = $(this).data('type'); 
    alert(text); 
}); 

Answer 4

$('#block > span').on('click', function(event) { 
    var text = $(this).attr('data-type'); 
    return text; 
}); 

Answer 5

試試這個（Demo）：

$('#block').on('click', 'span', function(event) { 
    var text = $(this).data('type');   
    return text; 
});