Jquery - how get value ul when click on li?

Question

Good day.

I have ul list on my page. me need get value ul when i click on li.

Html:

.ddlist {
position: absolute;
width: 316px;
display: none;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
margin: 0;
padding: 0;
margin-top: -3px;
}

.ddlist li {
list-style: none;
padding: 5px;
}


<ul id="list_t_railway" class="ddlist" style="display: block;">
   <li>Белорусский вокзал</li>
   <li>Казанский вокзал</li>
   <li>Киевский вокзал</li>
</ul>

For get value ul i use script:

$("#list_t_railway").on("click", function(){
      alert($(this).val());

    });

But i get empty value...

Tell me please why i get empty value and how write right?

P.S.: all script for test you can see here

Answer 1

If you want to alert the contents of the li element, you can add a click handler on all li elements.

$("#list_t_railway li").on("click", function(){
  alert($(this).text());

});

Updated fiddle: http://jsfiddle.net/t7ruw/2/

Answer 2

li elements have no value, so .val() won't return anything. Also, there's no event handler bound to the <li> elements themselves:

$("#list_t_railway li").on("click", function(){
  alert($(this).text());
});

Answer 3

try this it will give you same outpuy

$(document).on("click","#list_t_railway li", function(){
  alert($(this).text());
});