body on load not works on jquery

Question

I am trying to do this:

$(document).ready(function(){

    $('body').on('load', function(){
        alert('ok');
    });
    
});

But it not works.

Any help?

If you're using jQuery 3.x, you need to use `$('body').on('load', function ...)`. — Barmar, Jan 18 '21 at 22:40
@Barmar thanks. I fix the code, the error solved but the code not works — Italo Rodrigo, Jan 18 '21 at 22:41
Have you tried not waiting for the body to load but instead just wrapping it the `document.ready` code by itself? — imvain2, Jan 18 '21 at 22:50
I reproduced this, I can't get `$('body').on('load', ...)` to work. But `$(document).ready()` is essentially the same thing, so why do you need both? — Barmar, Jan 18 '21 at 22:55

score 1 · Answer 1 · answered Jan 18 '21 at 23:00

First, you have to use $(window).load() instead of $('body').on('load'()). Then, you need to separate the onload() function and the ready() function:

  $(document).ready(function(){
  alert("fires when webpage is loaded");
  });

  $(window).on('load', function(){
      alert("fires once when window/body has been loaded");
  });

Have a look at this to understand the difference.

Louys Patrice Bessette · Answer 2 · 2021-01-18T23:54:16.793

Whay your code does not work?

When DOMContentLoaded event fires... That is the event that triggers the $(document).ready() callback. Obviouly, the body has already loaded too.

So if you wait for the whole DOM to be loaded to define an event handler about body loaded... It will never be executed because that event has fired before the event handler has been defined.

And after a close look: There is squarely no "load" event fired for the body... Whatever its content.

So as in pythan's answer, that should be $(window).on("load", function(){...})

See below:

console.log("before")
$("body").on("load", function () {  // That NEVER fires.
  console.log("Body loaded");
});
console.log("after")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <img src="https://via.placeholder.com/500" />
</body>

But anyway, you don't need both for sure.

body on load not works on jquery

2 Answers2