javascript - How to pass parameter dynamically to JQuery click event from HTML elements? -

first of all, have mention newbie in javascript , jquery world. not sure if put down appropriate title question i'll try best explain problem.

scenario: have list of items names being displayed. when 1 of items being clicked, popup should show , display description of item. description retrieved server via ajax call upon click. ajax call requires unique id of item (in database) provided. here comes problem has 2 parts:

1. i don't know how , include item id in html. note list displays item name not id.
2. assume 1) resolved, how can pass id of item that's being clicked ajax call.

this html of list of items. can see, illustrates part 1) of problem (ie. don't know how include ids in html).

<ul>     <li class="item">item1</li> <!-- item has id=1 in database -->     <li class="item">item2</li> <!-- item has id=2 in database -->     <li class="item">item3</li> <!-- item has id=3 in database --> </ul> 

below jquery click event handler sends ajax call (ie. getjson) server. note part 2) of problem illustrated line var item_id = ??. note popup self-defined javascript.

    <script type="text/javascript" charset="utf-8">         $(document).ready(function() {             $(".item").click(function() {                 var item_id = ??                 var data = {"item_id":item_id};                 $.getjson("/item/json", data, function(data) {                     var name = data[0]["fields"]["name"]                     var description = data[0]["fields"]["description"]                     popup.call(this, name, description);                 });             });         });     </script> 

additional info: server side use django 1.3, , jquery 1.5.2 client side. hope have made question clear , appreciate experts. thanks.

here example similar looking for.
http://esdi.excelsystems.com/iseries400apps/exmain.pgm?wsname=dialog.pgm&wsnumb=214&wsprogtype=p

http://www.w3schools.com/tags/tag_li.asp

the < li > tag supports following standard attributes: id specifies unique id element

in case use:

<ul>     <li class="item" id="item_1">item1</li> <!-- item has id=1 in database -->     <li class="item" id="item_2">item2</li> <!-- item has id=2 in database -->     <li class="item" id="item_3">item3</li> <!-- item has id=3 in database --> </ul> 

and

<script type="text/javascript" charset="utf-8">     $(document).ready(function() {         $(".item").click(function() {             var item_id = $(this).attr('id').replace('item_','');             var data = {"item_id":item_id};             $.getjson("/item/json", data, function(data) {                 var name = data[0]["fields"]["name"]                 var description = data[0]["fields"]["description"]                 popup.call(this, name, description);             });         });     }); </script>