问题在jquery点击ok按钮时

Issue in jquery When clicking on ok button

本文关键字：按钮 ok 点击 jquery 问题      更新时间：2023-09-26

我已经编写了jquery和html css如下代码行

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 <script type="text/javascript">
     $(function () {
         resetTimer();
         document.onkeypress = resetTimer;
         document.onmouseover = resetTimer;
         function logout() {
             var t1 = setTimeout(reallyLogout, 60000);
             $(".popup-form").css("display", "block");
         }
         var t;
         function resetTimer() {
             clearTimeout(t);
             t = setTimeout(logout, 60000); // Logout in 10 minutes
         }
         function reallyLogout() {
             debugger
             $(".popup-form").css("display", "none");
             location.href = '../login/login.aspx';
         }
         function cancel() {
             clearTimeout(t1);
             resetTimer();
             $(".popup-form").css("display", "none");
         }
     });
 </script>
<style type="text/css">
    .popup-form {
     display:inline-block;
     padding:40px;
     background-color:white;
     border:1px solid black;
     position:fixed;
     left:40%;
     top:35%;
     display:none;
     z-index:99999999999999999;
   }
</style>
 <body>
<div class="popup-form">
    <div class="popup-inner-form">
    <h4>Confirm</h4>
        You will be logged out after 60 seconds
        <input id="okbtn" value="Ok" type="submit" onclick="return reallyLogout();" />
        <input id="cancelbtn" value="Cancel" type="submit" onclick="return cancel();" />
     </div>
 </div>
 </body>

我已经创建了自定义表单…当用户空闲60秒时显示。实际上我们的主要目的是在60秒后弹出显示。如果用户不按任何按钮(确定/取消)，则应将其重定向到登录页面。现在的问题是，当弹出窗口显示，并点击ok按钮，它不会重定向到登录页面…请帮我整理一下代码中的问题!!

首先，由于您使用的是即时执行的函数，因此您应该将jQuery作为参数传递，以便它在函数作用域中处于活动状态。

(function ($) {—> })(jQuery);

您应该从即时函数作用域中附加事件onclick，以便访问作为reallyLogout的函数，因为您不能访问即时函数调用作用域中的函数，因为它只在此作用域中执行一次。

t1应该在函数的全局作用域中声明，这样你就可以在任何嵌套函数调用var t1;的任何地方重置它。

这是一个工作的例子…我把时间定在了4秒

   (function ($) {
         resetTimer();
         var t1; // set this in global scope
         document.onkeypress = resetTimer;
         document.onmouseover = resetTimer;
         function logout() {
             t1 = setTimeout(reallyLogout, 4000);
             $(".popup-form").css("display", "block");
         }
         var t;
         function resetTimer() {
             clearTimeout(t);
             t = setTimeout(logout, 4000); // Logout in 10 minutes
         }
         function reallyLogout() {
            // debugger
           console.log($(".popup-form"));
             $(".popup-form").css("display", "none");
             location.href = '../login/login.aspx';
         }
         function cancel() {
             clearTimeout(t1);
             resetTimer();
             $(".popup-form").css("display", "none");
         }
     
         $("#okbtn").click(function(){reallyLogout();});
         $("#cancelbtn").click(function(){cancel();});
     })(jQuery);
 .popup-form {
     display:inline-block;
     padding:10px;
     background-color:white;
     border:1px solid black;
     position:fixed;
     left:10%;
     top:35%;
     display:none;
     z-index:99999999999999999;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="popup-form">
    <div class="popup-inner-form">
    <h4>Confirm</h4>
        You will be logged out after 60 seconds
        <input id="okbtn" value="Ok" type="submit" />
        <input id="cancelbtn" value="Cancel" type="submit"  />
     </div>
 </div>
 </body>

使用文档内部定义的函数，从块外准备。创建需要从out作为全局访问的函数。请参阅下面的代码片段。我修改了reallyLogout和cancel函数，因为它需要从外部访问。

JS: 

   $(function () {   
     resetTimer();
     document.onkeypress = resetTimer;
     document.onmouseover = resetTimer;
     var t1;
     function logout() {
         t1 = setTimeout(reallyLogout, 60000);
         $(".popup-form").css("display", "block");
     }
     var t;
     function resetTimer() {
         clearTimeout(t);
         t = setTimeout(logout, 60000); // Logout in 10 minutes
     }
    //declared the reallyLogout as a global function
    reallyLogout= function () {
         debugger
         $(".popup-form").css("display", "none");
         location.href = '../login/login.aspx';
     };
     cancel= function () {
         clearTimeout(t1);
         resetTimer();
         $(".popup-form").css("display", "none");
     }

 });

脚本运行时，dom元素不会被加载。将脚本位置更改为

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css">
    .popup-form {
     display:inline-block;
     padding:40px;
     background-color:white;
     border:1px solid black;
     position:fixed;
     left:40%;
     top:35%;
     display:none;
     z-index:99999999999999999;
   }
</style>
 <body>
<div class="popup-form">
    <div class="popup-inner-form">
    <h4>Confirm</h4>
        You will be logged out after 60 seconds
        <input id="okbtn" value="Ok" type="submit" onclick="return reallyLogout();" />
        <input id="cancelbtn" value="Cancel" type="submit" onclick="return cancel();" />
     </div>
 </div>
 <script type="text/javascript">
    // your script
 </script>
 </body>

删除onclick="return reallyLogout();",,onclick="return cancel();"并删除realylogout () &&Cancel()实现并粘贴到$(function(){})之外;

如果你使用$("#okbtn").click(function(){});然后你可以在$(function(){})中使用它;在这种情况下，还可以删除HTML中的onclick功能。

如果你的结构有细微的变化，那么在$(function(){})中声明函数为全局函数;即:reallyLogout = function(){//要执行的操作//};

您应该在以下方法中添加括号:

t = setTimeout(logout(), 60000); // Logout in 10 minutes
var t1 = setTimeout(reallyLogout(), 60000);

那么，它将工作。此外，我还测试了。

尝试使用

<input type="button">

代替

<input type="submit">
相关文章：