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?

Answer 1

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());
});

Answer 2

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.