CODEWITHSUNDEEP
jquerycordovajquery-mobilemobile
Alex Cooper
Alex Cooper

Reputation: 597

jquery mobile click event fires twice

I have a problem with a simple JQuery mobile app. It all boils down to the the click event firing twice.

No solution to similar problem has resolved this issue.

The problem happens whether deploying to device or displaying in browser.

Here's 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>

Upvotes: 7

Views: 11509

Answers (5)

MartinOnTheNet
MartinOnTheNet

Reputation: 144

i think this is related to how you handle your events. ie, using pageinit.

Also a page with different data-url might be hidden, so the same js also runs no matter what.

In your code, i would do the following change

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

In this manner, i know i will bind once.

Upvotes: 1

Alex W
Alex W

Reputation: 38253

There's lots of experimental stuff going on in the latest jQuery mobile with firing click events, which is probably causing these issues (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

The way I fixed it was:

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

and then it began functioning normally.

Upvotes: 2

Sampath
Sampath

Reputation: 65978

You can solve that by using below mentioned way.

Use firstly unbind and then bind like 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're having on method then you could use is as below.

Note: When you're using off method it's removing previous click event handler and with on method it adds new one.B'cos of that it does not allow to happen click 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>

Upvotes: 6

Nick Roth
Nick Roth

Reputation: 3077

If your onclick handler is firing twice then it's likely that your handler is being registered twice. You can add some logging just before you register the handler to validate that this is what's happening. Then you can debug why it's getting registered twice.

Upvotes: 0

Eric Herlitz
Eric Herlitz

Reputation: 26307

Did you try to prevent the default action?

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

Upvotes: 0

Related Questions