Question

I have some Html like:

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

What I wanted was to alert the data-id value when the user clicks the list item.

In jquery I tried:

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

Throws an exception though. Can anybody tell me what I’m doing wrong and how to fix?

Exception is: Microsoft JScript runtime error: Object doesn’t support property or method ‘text’

Answer 1

The attr function is a member of the jQuery object, which means you need to call $() on this:

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

Edit: As pointed out in the comments, this would probably be a better method yet:

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