刷新页面后，jQuery 函数在 PHP 中不起作用答案

【问题标题】：jQuery function is not working in PHP once the page is refreshed刷新页面后，jQuery 函数在 PHP 中不起作用
【发布时间】：2021-11-24 00:57:25
【问题描述】：

我想在页面开始时“隐藏”表格，该表格正在使用$(document).ready(function(){$("#result").hide();}); 但是我也想在单击提交按钮后“显示”表格，这是行不通的。

这是 PHP 文件，因为之后我必须添加更多 PHP 代码。如果我将其更改为 HTML，结果相同。

<!DOCTYPE html>
<html lang ="en">
       <head>
              <title>  Show Specific </title>
              <meta charset = "utf-8">
              <link rel="stylesheet" type="text/css" href="css/style.css">
              <script
                     src="https://code.jquery.com/jquery-3.6.0.min.js"
                     integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
                     crossorigin="anonymous">
              </script>

              <script>
                     $(document).ready(function(){
                            $("#result").hide();
                     });
                     $(document).ready(function(){
                            $("#button").click(function(){
                                   $("#result").show();//result
                            });
                     });
              </script>
       </head>
       <body>   
    
            <hr>
              
            <div id="appointment">
                <form>
                    Test ID: <input type="text" name="testID" /> <br><br>
                    First Name : <input type="text" name="First_Name" /> <br><br>
                    Last Name : <input type="text" name="Last_Name" /> <br><br>
                    <input id="submit" type="button" value="Submit" ><br><br>
                </form>
            </div>
                
            <div id="result">
                <table>
                    <tr> 
                    <th>Test ID</th>
                    </tr>

                    <tr>
                    <th>First Name </th>
                    </tr>

                    <tr>
                    <th>Last Name</th>
                    </tr>
                </table>
            </div>
                        
            <hr>

            <div id="footer">
                <footer>   Copyright &copy; ALL RIGHTS ARE RESERVED. </footer>
            </div>

       </body>
</html>

【问题讨论】：

因为您的提交正在进行页面导航，在这种情况下页面会重新加载。 CSS 更改不会通过页面导航保留。如果您希望某些更改持续存在，则必须将某种状态信息保存到 localStorage 之类的位置，并在页面加载时重做该更改

标签： javascript php jquery refresh show-hide

【解决方案1】：

如果你仔细看，输入按钮的id 是submit 而不是button，正如你在jQuery 事件处理程序中所写的那样。

把你的脚本改成这个：

<script>
$(document).ready(function(){
     $("#result").hide();
     $("#submit").click(function(){
        $("#result").show();//result
     });
});
</script>

另外：您不必拥有两个$(document).ready() 方法。只需实现一个，然后在里面添加你的函数。

【讨论】：