jQuery Mobile Click Event

Question

This might be the simple but I want to get in to core of this query.

I am using jQuery Mobile Latest build for one of my project. There is a problem with the response on the click event of a button.

1. I have to double click the button in order to fire it's click event and it takes time to start processing the click event handler for the button.

Query 1: Is it jQuery that messing it up.

Query 2: Can't only a single click can process jQuery's click event handler.

I have searched around the internet but did not find the appropirte resolution.

Answer 1

Do not use click event with jQuery Mobile if you don't like a delay. Basically jQuery Mobile click event has a 300ms delay and it can be event larger. You can use vclick event. It is a special jQuery Mobile click event made to bridge differences between desktop click and mobile tap. It don't suffer form delay.

Or you can use tap event or touchStart.

$(document).on('vclick', '#button', function(){ 
    console.log("click");
});

Read my other answer about click delay: In jQuery mobile, what's the diff between tap and vclick?

Answer 2

When you are on your mobile device viewing a website using jQuery Mobile, the click event has a 300ms delay.

Make sure you use jQuery Mobile's Tap

Also, I find it helpful when I am building a webapp with jQuery Mobile to use e.preventDefault() because if you don't, a tap event might also trigger on the element underneath it if the element you tap disappears with on your tap event. ie. .hide()

Example:

$('.button').on('tap', function(e){
      console.log('tapped');

      $(this).hide();
      e.preventDefault();
});

Answer 3

This worked for me it force the click event for jquerymobile

$("#button").trigger('click');

source: http://jquerymobile.com/demos/1.0a2/experiments/api-viewer/docs/bind/index.html