What is the correct method to Bind events to <a> and <li> List elements?

[Damien]

Hi Kendo gurus,

 I am wondering if I am doing something wrong.

Basically I have a couple of functions that check localStorage session variables and I want to  bind the events to list elements within my Kendo mobile application. 

I have a list view like so: KENDO LIST HTML
 <li data-icon="globe"><a href="#page1">Page 1</a></li>
<li data-icon="reply"><a href="#page2">Page 2</a></li>
<li data-icon="settings"><a href="#page3">Page3</a></li>

Then a function that checks if the user is a guest, and re-directs them: JS:
  function checkSession() {
     if (localStorage.getItem("guest") == "true") {app.navigate('#pleaseregister');}else {app.navigate('#page1');}
    };


I've tried:  
#1. <li data-icon="globe"><a href="#" onClick="checkSession();">Page 1</a></li>
and:
#2. <li data-icon="globe"><a href="#" data-click="checkSession">Page 1</a></li>
#3. <li data-click="checkSession" data-icon="globe"><a href="#" >Page 1</a></li>

In example 1, onClick events fire in the web browser/emulator  but not on physical device, it appears very unresponsive.
Example 2+ 3 does not work at all.

When I use a button like so: 
<a data-icon="toprated" data-click="checkSession"  data-role="button" style="width:90%; height:30px;">Create Listing</a>

It works! But I like the look of the list view. 

If you could let me know if there is a special way of doing this, it would be very much appreciated, I've noticed several Kendo UI users on here asking this question and there doesn't seem to have been an answer given? It's driving me crazy. 

Regards,

Damien.

[Alexander Valchev]

Hi Damien,

Thank you for contacting us.

I suggest you to use the build-in click event of the ListView widget. Here is an example.

Have in mind that click event triggers when the user taps anywhere in the ListView item. If you want to catch the tap/click on a particular item from the ListView template please consider using the Touch component.

I hope this will help.

Best regards,
Alexander Valchev
the Telerik team

[Damien]

Alexander,

Thanks for your response and your working solution, that is exactly what I was after. 

One more question - I am using the same syntax and method to bind actions to a tabstrip icon on my navbar and having issues.
Is there a way to bind a method that runs when a tabstrip-home or tabstrip-xxx is pressed? Doesn't appear to work.

If there is an issue is there a workaround?

Await your response

Regards Damien

[Alexander Valchev]

Hello Damien,

TabStrip has a select event which fires when tab is selected. Did you tried the following?

<div data-role="tabstrip" data-select="onSelect">
    <a href="#foo">foo</a>
    <a href="#bar">bar</a>
</div>

Best regards,
Alexander Valchev
the Telerik team