Home » Jquery » html – Can't get jQuery script to run after page has been loaded

html – Can't get jQuery script to run after page has been loaded

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have tried to get some jQuery code to execute when a page has been fully loaded and rendered. I have read that I should use the .on("pageshow") event to trigger the code to be executed.

The code below is a test that I can’t get to work properly. It loads a “box” that is colored cyan from the beginning. I want the color to be changed to yellow via jQuery after the page has been loaded. I also added a click-trigger to make sure that the color can be changed if I manually click on the text in the box. But the auto execution won’t work… I have also tried to define an event for .on("load").

So… I simply want to find a way to execute jQuery code after the page has been loaded (in my real code I will use it to scroll down to a specific element and highlight it)

    <!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>
How to&Answer:

As mentioned in some of the comments I have now modified the code to a working solution. I would like to present it if someone needs it in the future:

<!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>