单击事件在 jQuery 移动设备和 IE 上触发了两次

Question

我有一个 jQuery 移动应用程序，它依赖于运行考勤系统的弹出窗口。该系统工作正常，除了 Windows 8+.

上的 IE 版本 9+

当在客户端按下检查 in/out 的按钮时，POST 请求被发送到处理程序页面以在转发之前管理请求（即验证数据、输入数据库）到相关的客户端条目。

似乎正在发生的是按钮事件被触发了两次。第一次被标记为 "Aborted"（如 F12 开发人员工具的 Result 列所示），然后再次调用（我会 post 图片，但没有足够的声誉） .然而，调用似乎正在进入处理程序页面，尽管据称已中止，因为数据库中出现了两个条目。

按钮代码如下：

<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>

我特意禁用了该按钮，这样用户就无法多次点击该按钮。我尝试了不同的方法来生成按钮，包括使用 a href 并将 data-role 设置为按钮以及使按钮成为 submit 按钮 - 同样的事情发生了。按钮点击时没有其他 JavaScript 运行ning，因为它正在播放某些移动设备（用户验证在处理程序页面上完成）。

我可以通过将 X-UA-Compatible 设置为 IE=7 来强制页面呈现为旧版本的 IE，但这会使应用程序看起来很糟糕，我不确定强制 IE 将页面作为早期版本处理的安全方面。

我正在使用 jQuery Mobile 1.3.2 和 jQuery 1.10.2，因为较新的版本没有我们应用程序的核心功能。后端写在PHP。在 Windows Phone 8、Surface 3 和 Windows 8.1 桌面上重复出现该故障。

弹出代码：

<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代码：

<!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

我不是运行 Windows 8 所以我无法测试它，但是你可以使用 jQuery 检查按钮是否已经被按下。

例如：Html代码：

<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);
  });
});

当然，这是假设当您说按钮触发两次时，您的意思是点击事件是运行两次。如果点击事件仅触发一次但发送请求触发两次，则代码将不起作用。

单击事件在 jQuery 移动设备和 IE 上触发了两次

Click Event Fired Twice on jQuery Mobile and IE

html

javascript

jquery

internet-explorer

jquery-mobile