PhoneGap application (Cordoba) / Kendo UI application is blocked when you click the ListView link

Question

I have a cordova application that uses the Kendo interface for the interface. When I click on the link attached to one of the list items, the screen will close and will not allow me to go to other pages. I tried the same links outside the list in my own buttons, and it works without problems.

This is the code that I have

<div id="detailList"> <ul data-role="listview" data-style="inset" data-type="group"> <li> <ul> <li><a href="tel:#:mobilephone#"><span class="sectionTitle">phone</span> #:mobilephone#</a></li> <li><a href="mailto:#:email#"><span class="sectionTitle">email</span> #:email#</a></li> </ul> </li> <li> <ul> <li><span class="sectionTitle">specialtie(s)</span> #:specialties#</li> <li><span class="sectionTitle">keyword(s)</span> #:keywords#</li> </ul> </li> </ul> </div> 

If i put

 <a href="mailto:#:email#" class="ios-button email" data-icon="email">Email</a> 

somewhere outside of viewview ul, I can click a button, it will open the mail application, and when I return to my application, I can navigate without any problems. I wonder if someone else has encountered this problem, and if so, how to solve it.

Answer 1

To prevent your links from being viewed as navigation and using a hashed URL, add data-rel = "external" to your links in list items.