Hi

I have created a view with 3 data bound controls to a view.  On click (or touch if it is on a device) I am expecting the view to change.  This works great if I test it on my desktop browser.  However when I try it from a physical device it seems problematic.  It takes several touches before it actual seems to fire.  This happens on Ipad, Android 4.2, and Iphone.  I expect I am doing something wrong, however I cant find the problem.

Please have a look at the JSfiddle http://jsfiddle.net/rihanmeij/ULtkP/ that I created here that has all the important bits of code.  The button also does not work on JSFiddle, but it works when I run it from my local web server and a local browser.

What is the order that Javascript elements needs to run in?  First your View model, then your binding, and then at the very end you load up the mobile.Application?

Thanks 
Rihan Meij

Hello Rihan,

I forgot to provide a link to the updated jsFiddle example: http://jsfiddle.net/valchev/ULtkP/20/

Kind regards,
Alexander Valchev
the Telerik team

Hi,

it doesn't work on real devices.

I've tried it ( even provided fiddler example) on iPad and iPad mini - no luck. 
It's simple feature and definitely should work properly especially for mobile application.

Thanks,
Sasha.

Hello Oleksandr,

Thank you for the feedback.

My previous example is incorrect for which I apologize. The problem comes from the fact, that when the button's <a> tag is a direct child of the ListView's item it's data-role gets changed from "button" to "listview-link". As a result the element is not transformed into a button widget but to a link item.

The solution:

• if you want to keep the application layout as it is at the moment, you may bind to the click event of the ListView. In this case the event will fire when any of the items is clicked, so it is necessary to check which is the item.
  
  <ul data-role="listview" data-style="inset" data-bind="events: { click: Login }">

      ....

  </ul>

   

  Login: function (e) {

      if(e.item.is(":last-child")) { //if last item was clicked

          app.navigate("#LandingPage");

      }

  }
  
  Example: http://jsfiddle.net/valchev/ULtkP/22/
  
  
• alternatively you may wrap the button element inside a span tag (so it will be rendered as button).
  
  <li>

      <span><a id="loginButton" data-role="button" data-bind="events: { click: Login }">Login</a></span>

  </li
  
  Example: http://jsfiddle.net/valchev/ULtkP/23/

Regards,
Alexander Valchev
the Telerik team