确定用html5数据标签</span>点击了哪个<span>标签

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没有。因此，处理span上的click事件。

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

Answer 2

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

Answer 3

试试这个（Demo）：

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

Answer 4

您可以使用attr()：

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

Demo

Answer 5

看起来它检查div上的数据类型元素，不存在，

您可以为每个范围添加处理程序，以查看单击了哪一个。

例如

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