Jquery mobile click event fires twice

Question

I have a problem with a simple jQuery mobile app. It all boils down to double shooting.

Solving a similar problem did not solve this problem.

The problem occurs when deploying to a device or when displayed in a browser.

Here is the code

<title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script> <script src="cordova-2.2.0.js" type="text/javascript"></script> <script type="text/javascript"> $(document).bind("mobileinit", function () { $.support.cors = true; $.mobile.allowCrossDomainPages = true; }); </script> <link rel="Stylesheet" href="jquery.mobile-1.2.0.min.css" /> 

 <div> <input type="button" id="ButtonSubmit" value="Save" /> </div> 

 <script type="text/javascript"> $("#ButtonSubmit").click(function () { alert('Clicked'); }); </script> 

Answer 1

You can solve this using the method below .

Use unbind first and then bind as shown below :

 <script type="text/javascript"> $("#ButtonSubmit").unbind('click').bind('click', function () { alert('Clicked'); return false; //to prevent the browser actually following the links! }); </script> 

Update: If you have a method on , you can use this as shown below.

Note. When you use the off method, removing the event handler of the previous click and using the on method it adds a new one. B'cos from this does not allow 2 times.

 <script type="text/javascript"> $('#ButtonSubmit').off('click').on('click', function(){ alert('Clicked'); return false; //to prevent the browser actually following the links! }); </script> 

Answer 2

The latest jQuery mobile phone has a lot of experimental material with firing click events, which probably causes these problems (line # 2689):

 // This plugin is an experiment for abstracting away the touch and mouse // events so that developers don't have to worry about which method of input // the device their document is loaded on supports. // // The idea here is to allow the developer to register listeners for the // basic mouse events, such as mousedown, mousemove, mouseup, and click, // and the plugin will take care of registering the correct listeners // behind the scenes to invoke the listener at the fastest possible time // for that device, while still retaining the order of event firing in // the traditional mouse environment, should multiple handlers be registered // on the same element for different events. // // The current version exposes the following virtual events to jQuery bind methods: // "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel" 

http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js

How I fixed this:

 $('#mobileMenuItem').off('click'); 

and then it began to function normally.

Answer 3

I think this is due to the way you handle your events. those. using pageinit.

In addition, a page with a different URL may be hidden, so the same js are also executed no matter what.

In your code, I will make the following change

 <script type="text/javascript"> $(document).off('click').on('click', '#ButtonSubmit', function () { alert('Clicked'); }); </script> 

This way, I know that I will contact once.

Answer 4

Have you tried to prevent the default action?

 <script type="text/javascript"> $("#ButtonSubmit").click(function (e) { e.preventDefault(); alert('Clicked'); }); </script> 

Answer 5

If your onclick handler fires twice, then the likelihood that your handler will be registered twice. You can add several protocols just before registering the handler to verify that this is what happens. You can then debug why it is logged twice.