Getting a value of a clicked link

Question

I have a bunch of dummy links in a jQuery Mobile accordian. By dummy links I mean the that href is just "#". The list is created dynamically by another function and a value is stored in the element by using the value attribute. A loop writes the list like this

'<li value="' + result.ID + '"><a href="#">' + result.Name + '</a></li>'    

I am having trouble grabbing that value when I click on the link. I am currently using this event handler

$(document).on('click', '#openCallsList li a', function () {

});

When a link is clicked I want to have the value associated with it so I can grab some data from a database ( I know how to do this) and then create a dialog window (which I also know how to do). I am just lost on how to get the value I stored with the link.

Answer 1

This will work:

$(document).on('click', '#openCallsList li a', function () {
    console.log($(this).closest('li').attr('value'));
});

Answer 2

Although you could grab the value attribute from the <li> tag, this is invalid HTML. The value attribute has been deprecated.

This attribute has been deprecated in HTML 4.01. Therefore its use is no longer recommended.

source: http://www.htmlquick.com/reference/tags/li.html#value

What I would suggest is changing it to something like this:

'<li id="' + result.ID + '"><a href="#">' + result.Name + '</a></li>'

And then use

$(document).on('click', '#openCallsList li a', function () {
    var value = $(this).parent().attr('id');
    // or you could use the closest('li') function too.
});