Question

Web开发人员是新手，但是我试图在ASP.net中尝试一些jQuery Alerts，并注意到出于某些原因，下面的代码仅适用于Firefox。它不适用于Chrome，Edge甚至IE。我运行了Chrome的开发人员部分来查找错误，并且基本上是干净的，没有任何错误。我尝试将我的完整代码粘贴到下面进行检查。谁能看到任何明显的缺陷导致该功能不起作用？ YouTube视频中的人使用的是Chrome，这有点奇怪。这里是链接：https://www.youtube.com/watch?v=UTZjhCH80Zg在此先感谢您的帮助！

     <%@ Page Language="VB" AutoEventWireup="false" EnableSessionState="True" CodeFile="Default3.aspx.vb" Inherits="Default3"  %>

     <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>jquery expand textbox on focus using asp.net</title>


         <!-- Optional JavaScript -->
         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />

<!-- jQuery CSS -->
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/jquery-ui.min.css" />
<link rel="stylesheet" href="css/jquery-ui.structure.css" />
<link rel="stylesheet" href="css/jquery-ui.structure.min.css" />
<link rel="stylesheet" href="css/jquery-ui.theme.css" />
<link rel="stylesheet" href="css/jquery-ui.min.css" />

<!-- Optional theme -->
<link rel="stylesheet" href="StyleSheet.css" />

<script type="text/javascript">

    $(document).ready(function () {

        $('#btnSubmit').click(function () {
            $('#myAlert').show('fade');

            setTimeout(function () {
                $('#myAlert').hide('fade');
            }, 2000);

        });

        $('#linkClose').click(function () {
            $('#myAlert').hide('fade');

        });

    });
</script>

     </head>
     <body>
     <form id="form1" runat="server">

         <br />
         <br />
         <asp:Button ID="btnSubmit" runat="server" Text="Button" class="btn btn-primary"/>

         <div id="myAlert" class="alert alert-success collapse">
           <a href="#" class="close" data-dismiss="alert">&times;</a>
           <strong>Button successfully clicked</strong>
         </div>

             </form>
     </body>
     </html>

Answer 1

好吧，我弄清楚了这是怎么回事，ASP.net对这种类型的东西有些变幻无常，并在脚本启动后尝试重新加载。解决方案是包括“ return false”；（不带引号）在setTimeout函数之后。

<script type="text/javascript">

$(document).ready(function () {

    $('#btnSubmit').click(function () {
        $('#myAlert').show('fade');

        setTimeout(function () {
            $('#myAlert').hide('fade');
        }, 2000);
        return false;   //<------This here is the trick!

    });

    $('#linkClose').click(function () {
        $('#myAlert').hide('fade');

    });

});
</script>

jQuery Alert仅适用于Firefox，不适用于Chrome，Edge或IE

1 个答案: