jquery - Get the value li item clicked on -

i have following html.

<div id="programsdata">     <ul id="programsdataitems">     </ul> </div> 

i populate list using jquery code snippet. let's appends list items (item1 , item2) list.

$.each(data, function (i, val) {     $("#programsdataitems").append("<li><a href='#'>" + val.value + "</a></li>"); }) 

here function list item clicked on:

$("#programsdataitems").click(function (e) {     var selectedli = $(this).text;     e.preventdefault(); }); 

when click on list item, above function returns: item1item2. need 1 list item. can tell me how 1 list item clicked on? need modify how loading list items?

replace

$("#programsdataitems").click(function (e) { 

with

$("#programsdataitems").on("click", "li", function (e) { 

this way you'll right context (this) in callback, , delegation ensure can still dynamically add li elements #programsdataitems after binding.

note should not add a element in li element if purpose change cursor. can set cursor:pointer in css.