Button click(touch) only works after several times on devices

[Rihan]

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

[Alexander Valchev]

Hello Rihan,

Using the DOM/jQuery click event is not recommended in mobile application. Instead please consider working with the build-in click event of the corresponding widgets. In your particular case I recommend you to initialize a button widget:

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

What is the order that Javascript elements needs to run in?

1. Initialize the mobile application (not in document ready event).
2. Bind the View through the model property (data-model)

Also in case you want to cancel the show action of View you may use the beforeShow event. Alternatively you may set the initial mobile View to display in this way.

Kind regards,
Alexander Valchev
the Telerik team

[Alexander Valchev]

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

[Oleksandr]

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.

[Alexander Valchev]

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