jQuery trigger on page load

Question

How can I make jQuery run when my webpage has finished loading?

This is not what I want. All that this does is wait for the page to finish loading before any Javascript CAN be run.

$(document).ready(function(){
   //Code here
});

What I want is for this to run when the page loads. I don't want it to wait for 'click' or 'change'. Can I add a 'load' or something to this?

$(document).on("change", "#input", function(e) {
   $("#output").val($(this).val());
});

A workaround I have been using is to use jQuery to "change" the selected option on a select box, thereby triggering the code I actually want to run.

I have seen a bunch of questions like this, but every time the answer just says to use $(document).ready(function(){//Code}); which is not what I'm looking for.

Any ideas?

EDIT: Here is a better example of what I'm looking for.

This code below will run when the element with the id of 'input' is clicked. That is the only time it will run. I would like for it to run as soon as it is ready - as soon as $(document).ready(function(){}); can run it.

$(document).ready(function(){
    $(document).on("change", "#input", function(e) {
       $("#output").val($(this).val());
    });
});

I think that this would work, but I was hoping for a nicer solution and one that doesn't require me to rewrite everything as functions.

$(document).ready(function(){

    function runWhenReady(){
       $("#output").val($(#input).val());
    }

    $(document).on("change", "#input", function(e) {
      runWhenReady();    
    });

    runWhenReady();  
});

I think that this will run runWhenReady() when #input is clicked, and when the page finishes loading. My question is, is there a simpler way to do this?

define `webpage has finished loading` and we might be able to help. — Hodrobond, Apr 06 '17 at 17:57
Maybe you need to specify better what you mean when you say "finished loading". The `ready` event for instance is triggered when the DOM is ready. You want to wait for the images to load? — Romulo, Apr 06 '17 at 17:57
@Hodrobond I'm looking for something similar to `change` that I can add to the `.on()` method so that my 'function' will run after the page has loaded. This function (the one above) will already be wrapped in `$(document).ready(function(){});` — blackandorangecat, Apr 06 '17 at 18:02

score 2 · Answer 1 · edited Apr 06 '17 at 20:21

2

I think you're looking for $(window).load()

$(window).load(function(e){
    // code here
});

Answer to your question in the comments:

$(document).on('click', '#input', function(e){ 
    $('#output').val($(this).val());
});

edited Apr 06 '17 at 20:21

philipvr

5,738
4
32
44

answered Apr 06 '17 at 17:58

itamar

3,837
5
35
60

I think this does almost the same thing as `$(document).ready(function(){});` which is not really what I was looking for.. – blackandorangecat Apr 06 '17 at 18:03
How would I go about calling `$("#output").val($(#input).val());` when the page has finished loading, and whenever `#input` is clicked? – blackandorangecat Apr 06 '17 at 18:25
You should do $(document).on('click', '#input', function(e){ $('#output').val($(this).val()) }) – itamar Apr 06 '17 at 18:27
I don't think that works. That will trigger when clicked, but it won't run unless it is clicked. – blackandorangecat Apr 06 '17 at 18:29

score 2 · Accepted Answer · answered Apr 06 '17 at 18:44

I think the only way to do what I want is to name the function and call it two different ways.

$(document).ready(function(){

    function xyzzy(){
       $("#output").val($(#input).val());
    }

    //Call the function when #input is clicked
    $(document).on("change", "#input", function(e) {
      xyzzy();    
    });

    //Call the function when the page loads
    xyzzy();  
});

This will call the function when the page has finished loading, as well whenever #input is clicked.

score 0 · Answer 3 · answered Apr 06 '17 at 18:12

Can I add a 'load' or something to this?

yes you can which will like $(window).on( "load", handler )

Also there is not much difference between the above code and

$( window).load(function() {
  // Handler for .load() called.
});

The first method is just short cut of the second one

score 0 · Answer 4 · edited May 23 '17 at 11:46

0

$(document).ready happens when all the elements are present in the DOM, but not necessarily all content.

$(document).ready(function() {
    alert("document is ready");
});

window.onload vs document.onload

window.onload or $(window).load()

happens after all the content resources (images, etc) have been loaded.

$(window).load(function() {
    alert("window is loaded");
});

edited May 23 '17 at 11:46

Community

1
1

answered Apr 06 '17 at 18:22

Vishwas Nahar

418
7
21

Okay, so how would I go about calling `$("#output").val($(#input).val());` when the page has finished loading, and whenever `#input` is clicked? – blackandorangecat Apr 06 '17 at 18:23
add inside $(document).ready(function(){$( '#input').click( function(){ $('#output').val($(this).val()) })} which reads all function with load than call whenever you want. – Vishwas Nahar Apr 06 '17 at 18:33

score 0 · Answer 5 · answered Apr 07 '17 at 12:51

From your Example:

$(document).ready(function(){

function runWhenReady(){
   $("#output").val($(#input).val());
}

$(document).on("change", "#input", function(e) {
  runWhenReady();    
});

runWhenReady();  
});

You could write:

$("#input").on("change", function() {...});

which defines a handler for your input. Everytime you change the value in the input it will call the function passed as argument. That make the whole $(document)... unneccessary.

If you want to run the function just once, as soon as possible wrap it in a IIFE like:

(function(){...});

Here is a pretty good blog post about IIFE: http://benalman.com/news/2010/11/immediately-invoked-function-expression/

jQuery trigger on page load

5 Answers5