How to select an item from the list of submenus calls from the database using javascript

I call the item list from array into the sub-menu using createElement("li"). Now I want to select item from the list. I make them selectable using CSS. But I want to code like when I select an item then I enable to call function for that item. How can i do it?

var gameName = ['Game one', 'Game Two', 'Game three']

function SubMenu() {
  // Set variable for the submenu ul element
  var Submenu = document.getElementById('submenu');
  // For loop - for each value in the array
  for (var i = 0; i < gameName.length; i++) {
    // Create new li/List Item
    var Item = document.createElement('li');
    // Set innerHTML for this element
    Item.innerHTML = '<a href="#">' + gameName[i] + '</a>';
    // Append new element to the 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' are calling as list of sub menu. Now how I can select 'Game one' so I will able to call a function on it? Thank you.


Here i make for jquery version since you tagged with jQuery tag :

HTML(Assumed items already 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 for dynamic content
// this happen when clicked on anchor element(appended element)
$('#submenu').on('click', 'li a', function (e) {
  e.preventDefault();
  alert($(this).text());
  // updated :
  // find the index of selected element
  alert($(this).parent().index());
   // call any function here
});

DEMO