A href (data-role=button) click fires twice

[Cestrian]

Hi all!.

I have really strange problem. I use jQuery (1.11.2) and most recent Kendo Mobile UI.

My app is built from two .html pages. Simplified code below:

Page 01 has code:
<div data-role='content'>
   <a href="Fitter/Register.html" data-role="button">Register here!</a>
</div>

Page 02 has code:
<div data-role='content'>
   <p id='javascriptOnClickRemoveContentOfThisDiv'>Java<p>
</div>

as you can see, both Register button and Paragraph are at the same position on screen although on different views. Now the strange thing that happens here is that user will click on Register here! button, Kendo will switch the view to Page02 and Java text from Paragraph is being removed by javascript function (below), so it looks like Register here! fires twice firstly on Page01 (as supposed) and then on Page 02 (why? - delayed event?, also it's not happening on all Android devices - just on some):
$('javascriptOnClickRemoveContentOfThisDiv').click(function() {
     this.html('');
});

[Cestrian]

Small update. If I click on 'Register here!' extremely fast sometimes it's ok (On Page 02 jQuery code is not removing Java text automatically). Tried to use data-delay=10000 but it's not working with anchor ....

[Petyo]

Hi Phill,

using the DOM click event is not reliable on touch devices. You should use the touch widget instead. 



Regards,
Petyo
Telerik

 

 

[Cestrian]

Many thanks Petyo,
Turning on transition effect sorted that out.

So to be sure. If i remove href from anchor element and i add data-tap="myTouch.renderAnotherView" it should work as expected? How to render a View from javascript function? as so far <a href> and Kendo made that for me automatically.

[Petyo]

Hi Phill,

you can use the kendo mobile application instance .navigate(url) method for that purpose. The transition also fixes it, since it "swallows" the DOM click event. 

Regards,
Petyo
Telerik