在jQuery Mobile和IE上单击两次事件触发

Question

I have a jQuery Mobile App that relies on a popup to run a Time & Attendance system. The system works fine except for IE versions 9+ on Windows 8+.

When the button to check in/out at a client is pressed, a POST request is sent to a handler page to manage the request (ie validate data, enter into database) before being forwarded to the relevant client entry.

What appears to be happening is the button event is being fired twice. The first time is flagged as "Aborted" (as seen in Result column of the F12 Developer Tools) before it is called again (I would post images, but don't have sufficient reputation). However it seems the call is making it to the handler page, despite being supposedly aborted, as there are TWO entries appearing in the database.

The code for the button is as follows:

<button data-inline="true" data-mini="true" data-theme="b" data-ajax="false" id="submitBtn" onClick="this.form.submit(); this.disabled=true;">Check Out / Split Visit</button>

I deliberately disable the button so users can't click on the button multiple times. I have tried different ways of generating the button, including using a href and setting the data-role to button and making the button a submit button - the same thing occurs. There is no other JavaScript running on the button click as it was playing up with some mobile devices (user validation is done on the handler page).

I can force the page to render as an older version of IE by setting the X-UA-Compatible to be IE=7 , but this makes the app awful to look at and I'm not sure about the security aspects of forcing IE to handle the page as an earlier version.

I'm using jQuery Mobile 1.3.2 and jQuery 1.10.2 as the newer versions don't have some features that are core to our application. The backend is written in PHP. The fault has been duplicated on Windows Phone 8, a Surface 3 and Windows 8.1 Desktop.

Popup Code:

<div data-role="popup" id="checkInOut" data-theme="b" data-dismissible="false" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
        <h3 id="checkTitle">Check-In At Client</h3>
        <form action="checkInOutHandler.php" method="post" name="checkInOutForm" id="checkInOutForm" data-ajax="false">
            <input type="hidden" name="TAClientID" id="TAClientID" />
            <input type="hidden" name="actionType" id="actionType" value="In" />
            <label for="useCurrentTime">
                Use Current Time
            </label>
            <input id="useCurrentTime" name="useCurrentTime" type="checkbox" class="useCurrentTime" data-mini="true" checked="checked" />

            <!-- Hidden Div for the manual entry of time !-->
            <div id="customTimeDiv" style="display: none;">
                <label for="customTime">
                    Enter the time you wish to use (in 24 Hour format hh:mm)
                </label>
                <input id="customTime" name="customTime" type="time" placeholder="Enter Time (hh:mm)" data-mini="true" />

                <label for="customReason">
                    You MUST select a reason for not using the current time
                </label>
                <select name="customReason" id="customReason" data-theme="b" data-icon="arrow-d" data-inline="true" data-mini="true">
                    <option value="" selected>Please select a reason...</option>
                    <option value='937'>No reception</option><option value='938'>Forgot</option><option value='943'>Phone flat / not working</option><option value='944'>Problem with portal</option><option value='949'>Split Visit</option><option value='964'>Incorrect Client Selected</option><option value='963'>Incorrect Service Selected</option><option value='945'>Other (Payroll may call to confirm)</option>                </select> 
            </div>
            <!-- End Hidden Div !-->
            <br />
            <input type="hidden" id="travelTime" name="travelTime" data-mini="true" data-inline="true" value="0" />
            <button data-inline="true" data-mini="true" data-theme="b" data-ajax="false" id="submitBtn" onClick="this.form.submit(); this.disabled=true;">Check In</button>
            <a href="#" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
        </form>
    </div>

Header Code:

<!DOCTYPE html>
<html>
    <head> 
        <title>SMNCC App</title> 
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="shortcut icon" href="https://portal.suemann.com.au/favicon.ico" />

        <!-- <script type="text/javascript" src="./js/timeTrack.js"></script>!-->
        <script type="text/javascript" src="./js/readNewsItem.js"></script>

        <link rel="stylesheet" href="./jqueryMobile/jquery.mobile.min.css" /> <!-- Original File: jquery.mobile-1.3.2.min.css !-->
        <link rel="stylesheet" href="./themes/hartijaPrint.css" type="text/css" media="print"> <!-- Hartija print CSS framework !-->
        <script type="text/javascript" src="./jqueryMobile/jquery.min.js"></script> <!-- Original File: jquery-1.10.2.min.js !-->

        <script type="text/javascript" src="./jqueryMobile/disableAjax.js"></script>

        <script type="text/javascript" src="./jqueryMobile/jquery.mobile.min.js"></script> <!-- Original File: jquery.mobile-1.3.2.min.js !-->      

    </head> 
    <body

Answer 1

I'm not running Windows 8 so I can't test it, but you can check to see if the button has already been pressed using jQuery.

Eg: Html code:

<button id="mybutton">Click me!</button>

jQuery:

var alreadySent = false;
$(document).ready(function() {
  $("#myButton").click(function(event) {
    event.preventDefault();
    if (!alreadySent) {
      sendPostRequestOrWhatever();
      alreadySent = true;
    }
    $(this).prop("disabled", true);
  });
});

Of course, this assumes that when you say the button fires twice you mean that the click event is running twice. If the click event is only firing once but the send request is firing twice, then the code won't work.