CODEWITHSUNDEEP
jquery
AnonyMouse
AnonyMouse

Reputation: 18630

How to get the data value from a list item, using jquery, when it is clicked

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'

Upvotes: 1

Views: 16950

Answers (1)

Jonathan S.
Jonathan S.

Reputation: 2228

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'));
});

Upvotes: 7

Related Questions