jquery - How to select item from the list of sub menu calling from database using javascript -

i call item list array sub-menu using createelement("li"). want select item list. make them selectable using css. want code when select item enable call function item. how can it?

var gamename = ['game one', 'game two', 'game three']    function submenu() {    // set variable submenu ul element    var submenu = document.getelementbyid('submenu');    // loop - each value in array    (var = 0; < gamename.length; i++) {      // create new li/list item      var item = document.createelement('li');      // set innerhtml element      item.innerhtml = '<a href="#">' + gamename[i] + '</a>';      // append new element submenu.      submenu.appendchild(item);    }

<ul>  <li><a href="#">games</a>    <ul id="submenu"></ul>  </li>  <li><a href="#">stake</a></li>  <li><a href="#">max players</a></li>  <ul>

here 'game one', 'game two', 'game three' calling list of sub menu. how can select 'game one' able call function on it? thank you.

here make jquery version since tagged jquery tag :

html(assumed items appeared on submenu)

<ul> <li><a href="#">games</a>     <ul id="submenu">         <li><a href="#">game one</a>         </li>         <li><a href="#">game two</a>         </li>         <li><a href="#">game three</a>         </li>     </ul> </li> <li><a href="#">stake</a>  </li> <li><a href="#">max players</a>  </li> </ul> 

js

// use event delegation dynamic content // happen when clicked on anchor element(appended element)  $('#submenu').on('click', 'li a', function (e) {   e.preventdefault();   alert($(this).text());   // updated :   // find index of selected element   alert($(this).parent().index());    // call function here }); 

demo