Question

<!DOCTYPE html>
<html dir='ltr'>
    <head>
        <title>Temponary Rush</title>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <link rel='stylesheet' type='text/css' href='web/css/login.css'>
        <script type='text/javascript' src='js/jquery.js'></script>
    </head>
    <body>
        <div id='container'>
            <div id='left'>
                levá strana
            </div>
            <div id='center'>
                <form method='POST'>
                    <table>
                        <tr>
                            <td>
                                <button id='playasguest'>Play as guest</button>
                                <button id='login'>Login</button>
                                <button id='register'>Register</button>
                            </td>
                        </tr>
                    </table>
                    <table id='act-login'>
                        <tr>
                            <td>
                                <input type='text' placeholder='Nick'>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type='submit' value='Play as guest'>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id='right'>
                pravá strana
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
               $('#playasguest').click(function(){
                   $('#act-login').load('web/content/playasguest.html');            
               });
               $('#login').click(function(){
                   $('#act-login').load('web/content/logintable.html');
               });
                $('#register').click(function(){
                   $('#act-login').load('web/content/registertable.html');
               });
            });
        </script>
    </body>

</html>

大家好，我有这个问题。当我点击让我们说作为客人播放时，它会出现并立即消失。只有当我快速点击它时，我才能看到它。到目前为止，控制台没有给我任何错我试图添加功能来检查它是否已加载。文件还可以，所以我不知道。

Answer 1

使用preventDefault（）事件方法

  $(document).ready(function(){
                       $('#playasguest').click(function(e){
                        e.preventDefault();
                        $('#act-login').load('web/content/playasguest.html');            
                       });
                       $('#login').click(function(e){
                        e.preventDefault();
                           $('#act-login').load('web/content/logintable.html');
                       });
                        $('#register').click(function(e){
                            e.preventDefault();
                           $('#act-login').load('web/content/registertable.html');
                       });
                    });

<!DOCTYPE html>
 <html dir='ltr'>
 <head>
   <title>Temponary Rush</title>
    <meta charset='UTF-8'>
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel='stylesheet' type='text/css' href='web/css/login.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
    <body>
      <div id='container'>
           <div id='left'>
                        levá strana
                    </div>
                    <div id='center'>
                        <form method='POST'>
                            <table>
                                <tr>
                                    <td>
                                        <button id='playasguest'>Play as guest</button>
                                        <button id='login'>Login</button>
                                        <button id='register'>Register</button>
                                    </td>
                                </tr>
                            </table>
                            <table id='act-login'>
                                <tr>
                                    <td>
                                        <input type='text' placeholder='Nick'>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type='submit' value='Play as guest'>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div id='right'>
                        pravá strana
                    </div>
                </div>
                
             
            </body>
        
        </html>

jQuery.load（）加载的内容消失了

1 个答案:

使用preventDefault（）事件方法