如何在单击时使用jquery从列表项中获取数据值

Question

我有一些Html，如：

<div id="adiv">
    <ul>
            <li data-id="3">Cat</li>
            <li data-id="4">Dog</li>
        </ul>
</div>

我想要的是在用户点击列表项时提醒data-id值。

在jquery中我尝试过：

$('li').click(function () {
        alert(this.attr('data-id'));
    });

虽然引发了例外。谁能告诉我我做错了什么以及如何解决？

异常是：Microsoft JScript运行时错误：对象不支持属性或方法'text'

Answer 1

attr函数是jQuery对象的成员，这意味着您需要在$()上致电this：

$('li').click(function () {
    alert($(this).attr('data-id'));
});

编辑：正如评论中所指出的，这可能是一种更好的方法：

$('li').click(function () {
    alert($(this).data('id'));
});