Selecting a list item on a touch screen

Question

I've found multiple threads based on or around this question however the answers so far haven't helped what so ever. I'm trying to get this to work through pure JavaScript (JQuery accepted).

So far I have it working so that I can select an item via web browser on a computer but the click event doesn't seem to work with touch screens. I've tried multiple "solutions" from other threads such as adding touch for example:

$('.List').on('click touch', function () {
// code
});

My current JavaScript (Works on pc):

document.querySelector('.List').addEventListener('click', function (e) {
var selected;

if (e.target.tagName === 'LI') {
    selected = document.querySelector('li.selected');
    if (selected)
        selected.classList = '';
    e.target.classList = 'selected'
}

document.getElementById('ItemValue').value = e.target.innerText;

});

In the above JavaScript I'm simply adding a colour to the background of the list item and getting the inner text and storing it.

My list (Items are added at runtime)

<div id="SelectedItems" class="ListBox">
  <ul id="Selected" class="List ItemList" runat="server" >
    <%--List items here--%>
  </ul>
</div>

Answer 1

If you sure, you are including the Jquery library, try using this solution.

Since all your list items are loading at run time, you can also use like this,

$(document).ready(function () {
    $(document).on('click', '#Selected li' function () {
          // code
    });
});