Question

我有一个jQuery移动应用程序依赖于一个弹出窗口来运行Time＆amp;考勤系统。除了Windows 8 +上的IE 9+以外，该系统工作正常。

当按下要在客户端签入/签出的按钮时，POST请求被发送到处理程序页面以管理请求（即验证数据，进入数据库），然后转发到相关的客户端条目。

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

按钮的代码如下：

<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运行，因为它正在播放一些移动设备（用户验证在处理程序页面上完成）。

我可以通过将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>

标题代码：

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

当然，这假设当你说按钮触发两次时你意味着click事件正在运行两次。如果click事件仅触发一次，但发送请求触发两次，则代码将无效。

点击jQuery Mobile和IE

1 个答案: