Question

我试图让一些jQuery代码在页面完全加载并呈现后执行。我已经读到我应该使用.on("pageshow")事件来触发要执行的代码。

以下代码是无法正常工作的测试。它从一开始就加载一个青色的“盒子”。我希望页面加载后通过jQuery将颜色更改为黄色。我还添加了一个单击触发功能，以确保如果我手动单击框中的文本可以更改颜色。但是自动执行无法正常工作...我还尝试为.on("load")定义一个事件。

所以...我只是想找到一种在页面加载后执行jQuery代码的方法（在我的真实代码中，我将使用它向下滚动到特定元素并突出显示它）

    <!DOCTYPE html>
    <html lang="sv">
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
      <script>
        $(document).ready(function(){
            $(window).on('pageshow', function() {
                $("#box").css("background-color", "yellow"); // This never happens...
            });
    
            $("#titletext").click(function(){
                $("#box").css("background-color", "green"); 
            });
        });
      </script> 
      
    </head>
    <body>
            <div id="box" class="d-flex p-2" style="background-color: cyan">
                <div id="titletext" class="p-2 w-100">
                    My header!
                </div>
            </div>
    </body>
    </html>

Answer 1

正如一些评论中所述，我现在已经将代码修改为可行的解决方案。如果将来有人需要，我想提出：

<!DOCTYPE html>
<html lang="sv">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <script>
    // the event is now defined outside the $(document).ready-part
    $(window).on('pageshow', function() {
        $("#box").css("background-color", "yellow"); // This happens after page is loaded
    });

    $(document).ready(function(){
        $("#titletext").click(function(){
            $("#box").css("background-color", "green"); 
        });
    });
  </script> 

</head>
<body>
        <div id="box" class="d-flex p-2" style="background-color: cyan">
            <div id="titletext" class="p-2 w-100">
                My header!
            </div>
        </div>
</body>
</html>

页面加载后无法运行jQuery脚本

1 个答案: