Develop Reference

Are functions inside $(document).ready available in the global scope

If I have some code like this:
jQuery(document).ready(function() {
jQuery('body').on('mouseup', '.some-div', function(e){
});
});
Is it possible to trigger the mouseup event outside the (document).ready()
with
jQuery('.some-div').mouseup();
or should I write this code
jQuery('body').on('mouseup', '.some-div', function(e){
});
as a function outside the (document).ready()?

I don't think dependency matters as much as loading order of the whole file. $(document).ready ensures that jQuery waits to execute the main function until
the page Document Object Model (DOM) is ready for JavaScript code to
execute.
Code outside this ready block might (be tried to) run before the page is actually ready. For instance, let's say this is code that's in the head of your page:
<script>
jQuery(document).ready(function() {
jQuery('body').on('mouseup', '.some-div', function(e){
});
});
jQuery('.some-div').mouseup();
</script>
The ready block will wait, as described above, but the mouseup trigger will try to fire, but it can't. The DOM isn't ready yet, which means .some-div can't be found yet - and thus, the trigger can't be activated.
To improve the chances that DOM is ready, you can try to load your jQuery before the closing </body> tag. The ready block can stay in the head, but the trigger should then move to the end of the document to improve the likelihood that the DOM is ready (which it normally should at that stage). For an interesting read on where to place script tags, also see this highly popular post.

jQuery('.some-div').mouseup(callback); writing this outside of document ready does not ensure document is ready before event is being attached to a document element. It may happen jQuery('.some-div') is not there before we are trying to access and attach an event listener.
jQuery(function() {
jQuery('body').on('mouseup', '.some-div', function(e){
});
is equivalent to
jQuery(document).ready(function() {
jQuery('body').on('mouseup', '.some-div', function(e){
});
});
Both the ways are good to ensure availability of dom elements before access.
Once the event is attached you can trigger any time. But you should always make sure document is ready.

Once .ready() is executed and event is binded, you can call it outside of that function.

Yes it's possible to trigger mouseup outside $.ready() using
jQuery('.some-div').mouseup();
But remember to call it after $.ready gets executed. In practice it requires another $.ready handler or just the invocation in the same one at the end.

Try this :
$(document).on('mouseup','.some-div',function(){
//code there
});

When does $(document).load() execute? [duplicate]

What are differences between
$(document).ready(function(){
//my code here
});
and
$(window).load(function(){
//my code here
});
And I want to make sure that:
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
are the same.
Can you tell me what differences and similarities between them?

$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Query 3.0 version
Breaking change: .load(), .unload(), and .error() removed
These methods are shortcuts for event operations, but had several API
limitations. The event .load() method conflicted with the ajax .load()
method. The .error() method could not be used with window.onerror
because of the way the DOM method is defined. If you need to attach
events by these names, use the .on() method, e.g. change
$("img").load(fn) to $(img).on("load", fn).1
$(window).load(function() {});
Should be changed to
$(window).on('load', function (e) {})
These are all equivalent:
$(function(){
});
jQuery(document).ready(function(){
});
$(document).ready(function(){
});
$(document).on('ready', function(){
})

document.ready is a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all the content.
window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded. So, if you're using image dimensions for example, you often want to use this instead.
Also read a related question:
Difference between $(window).load() and $(document).ready() functions

These three functions are the same:
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
here $ is used for define jQuery like $ = jQuery.
Now difference is that
$(document).ready is jQuery event that is fired when DOM is loaded, so it’s fired when the document structure is ready.
$(window).load event is fired after whole content is loaded like page contain images,css etc.

From the jQuery API Document
While JavaScript provides the load event for executing code when a
page is rendered, this event does not get triggered until all assets
such as images have been completely received. In most cases, the
script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code. When using
scripts that rely on the value of CSS style properties, it's important
to reference external stylesheets or embed style elements before
referencing the scripts.
In cases where code relies on loaded assets (for example, if the
dimensions of an image are required), the code should be placed in a
handler for the load event instead.
Answer to the second question -
No, they are identical as long as you are not using jQuery in no conflict mode.

The Difference between $(document).ready() and $(window).load() functions is that the code included inside $(window).load() will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the document ready event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
There are not difference between the above 3 codes.
They are equivalent,but you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $ as a shortcut name.
jQuery.noConflict();
jQuery.ready(function($){
//Code using $ as alias to jQuery
});

$(document).ready(function(e) {
// executes when HTML-Document is loaded and DOM is ready
console.log("page is loading now");
});
$(document).load(function(e) {
//when html page complete loaded
console.log("completely loaded");
});

The ready event is always execute at the only html page is loaded to the browser and the functions are executed....
But the load event is executed at the time of all the page contents are loaded to the browser for the page.....
we can use $ or jQuery when we use the noconflict() method in jquery scripts...

$(window).load is an event that fires when the DOM and all the content (everything) on the page is fully loaded like CSS, images and frames. One best example is if we want to get the actual image size or to get the details of anything we use it.
$(document).ready() indicates that code in it need to be executed once the DOM got loaded and ready to be manipulated by script. It won't wait for the images to load for executing the jQuery script.
<script type = "text/javascript">
//$(window).load was deprecated in 1.8, and removed in jquery 3.0
// $(window).load(function() {
// alert("$(window).load fired");
// });
$(document).ready(function() {
alert("$(document).ready fired");
});
</script>
$(window).load fired after the $(document).ready().
$(document).ready(function(){
})
//and
$(function(){
});
//and
jQuery(document).ready(function(){
});
Above 3 are same, $ is the alias name of jQuery, you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $. If u face conflict jQuery team provide a solution no-conflict read more.
$(window).load was deprecated in 1.8, and removed in jquery 3.0

What's the difference between using onload in the DOM and .load() in jQuery?

For example:
<iframe onload="functionName('id-name', 'http://domain.com');"/>
versus
$('#id-name').load(functionName('id-name', "http://domain.com');
(Actually... is my jQuery right?)
UPDATE: Thanks, all, for the responses. I'm using:
$('#id-name').load(function() {
functionName('id-name', 'http://domain.com');
});
ETA: "body" was supposed to be an iframe (oops), so am not using window.load.

First of all, the syntax of your jQuery is wrong. The jQuery that's analogous would be:
$('#id-name').load(function() {
functionName('id-name', "http://domain.com');
});
To bind an event handler, you have to supply a function, you were actually calling the function at the binding time.
However, this is not equivalent for a few reasons.
First, you're binding the handler to the #id-name element, not the body (unles you also did <body id="id-name">. So it wouldn't run when the body is loaded, but only when that specific element is loaded. In general, per-element load handlers are only useful for elements that have separate sources that get loaded asynchronously (e.g. images and iframes); they allow you to detect and take action when those elements are filled in. This is particular useful if you're changing the source dynamically.
Second, ssuming your jQuery code is in the $(document).ready(...) handler, as most jQuery code is, it doesn't run until after the DOM is fully loaded. By that time, the body's onload event has already been triggered. Any handlers added at this time will not run for elements that were already loaded. I've created a fiddle that demonstrates this:
<body onload="alert('inline body onload');">
<div id="foo"></div>
</body>
$(document).ready(function () {
$("#foo").load(function () {
alert("foo onload");
});
$("body").load(function () {
alert("jquery body onload");
});
});
Only the inline body onload alert fires.
However, if you just want a jQuery equivalent to putting a function call in the <body onload=""> attribute, the $(document).ready() handler is considered analogous. See jQuery equivalent of body onLoad, the first question in the Related sidebar.
However, as Gloserio's answer says, $(window).load(...) does work, despite the timing (it's recognized specially, similar to $(document).ready()). This modified fiddle demonstrates it.

$(window).load(function () {
functionName('id-name', "http://domain.com');
});
Seems to be a fair enough equivalent of body's load event.
Related :
load event in jQuery
SOF has answered all : jQuery equivalent of body onLoad

onload is a DOM event that is triggered when the page begins to load.
.load() is a shortcut to an AJAX call using jQuery.
They really have nothing in common...other than having "load" in their names.

jQuery document.ready

I am a little confused with document.ready in jQuery.
When do you define javascript functions inside of
$(document).ready() and when do you not?
Is it safe enough just to put all javascript code inside of $(document).ready()?
What happens when you don't do this?
For example, I use the usual jQuery selectors which do something when you click on stuff. If you don't wrap these with document.ready what is the harm?
Is it only going to cause problems if someone clicks on the element in the split second before the page has loaded? Or can it cause other problems?

When do you define javascript functions inside of $(document).ready() and when do you not?
If the functions should be globally accessible (which might indicate bad design of your application), then you have to define them outside the ready handler.
Is it safe enough just to put all javascript code inside of $(document).ready()?
See above.
What happens when you don't do this?
Depends on what your JavaScript code is doing and where it is located. It the worst case you will get runtime errors because you are trying to access DOM elements before they exist. This would happend if your code is located in the head and you are not only defining functions but already trying to access DOM elements.
For example, I use the usual jQuery selectors which do something when you click on stuff. If you don't wrap these with document.ready what is the harm?
There is no "harm" per se. It would just not work if the the script is located in the head, because the DOM elements don't exist yet. That means, jQuery cannot find and bind the handler to them.
But if you place the script just before the closing body tag, then the DOM elements will exist.
To be on the safe side, whenever you want to access DOM elements, place these calls in the ready event handler or into functions which are called only after the DOM is loaded.
As the jQuery tutorial (you should read it) already states:
As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.
To do this, we register a ready event for the document.
$(document).ready(function() {
// do stuff when DOM is ready
});
To give a more complete example:
<html>
<head>
<!-- Assuming jQuery is loaded -->
<script>
function foo() {
// OK - because it is inside a function which is called
// at some time after the DOM was loaded
alert($('#answer').html());
}
$(function() {
// OK - because this is executed once the DOM is loaded
$('button').click(foo);
});
// OK - no DOM access/manipulation
alert('Just a random alert ' + Math.random());
// NOT OK - the element with ID `foo` does not exist yet
$('#answer').html('42');
</script>
</head>
<body>
<div id="question">The answer to life, the universe and everything</div>
<div id="answer"></div>
<button>Show the answer</button>
<script>
// OK - the element with ID `foo` does exist
$('#answer').html('42');
</script>
</body>
</html>

The document.ready handler is triggered when the DOM has been loaded by the browser and ready to be manipulated.
Whether you should use it or not will depend on where you are putting your custom scripts. If you put them at the end of the document, just before the closing </body> tag you don't need to use document.ready because by the time your script executes the DOM will already be loaded and you will be able to manipulate it.
If on the other hand you put your script in the <head> section of the document you should use document.ready to ensure that the DOM is fully loaded before attempting to modify it or attach event handlers to various elements. If you don't do this and you attempt to attach for example a .click event handler to a button, this event will never be triggered because at the moment your script ran, the jQuery selector that you used to find the button didn't return any elements and you didn't successfully attach the handler.

You put code inside of $(document).ready when you need that code to wait for the DOM to load before executing. If the code doesn't require the DOM to load first to exist, then you can put it outside of the $(document).ready.
Incidentally, $(function() { }) is short-hand for $(document).ready();
$(function() {
//stuff here will wait for the DOM to load
$('#something').text('foo'); //should be okay
});
//stuff here will execute immediately.
/* this will likely break */
$('#something').text('weee!');

If you have your scripts at the end of the document, you dont need document.ready.
example: There is a button and on click of it, you need to show an alert.
You can put the bind the click event to button in document.ready.
You can write your jquery script at the end of the document or once the element is loaded in the markup.
Writing everything in document.ready event will make your page slug.

There is no harm not adding event handlers in ready() if you are calling your js functions in the href attribute. If you're adding them with jQuery then you must ensure the objects these handlers refer to are loaded, and this code must come after the document is deemed ready(). This doesn't mean they have to be in the ready() call however, you can call them in functions that are called inside ready() themselves.

jQuery .click() event

I'm a bit confused with jQuery's .click() event. I'm trying to use the event on an image inside a span. This is the line of HTML containing the span and image.
<span class="content-message-element"><img class="content-message-icon" src="./images/icon_close.png" alt="Close Message" /></span>
As you can see, the image has the class 'content-message-icon'. I've used this in my jQuery code (by the way - I have jQuery 1.7.1 included) but nothing happens ; the event is not triggered at all.
Is the .click() event limited to certain types of elements?
<script type="text/javascript">
$(".content-message-icon").click(function() {
alert("Handler for .click() called.");
});
</script>
This is my jQuery, any help is appreciated.

The click event should work fine. Try putting in the document ready code, like so:
$(function() {
$(".content-message-icon").click(function() {
alert("Handler for .click() called.");
});
});
Example with jsFiddle: http://jsfiddle.net/vGPfu/1/

it may happen that u r firing click event before the DOM is ready. Use this ans
$(document).ready(function(){
$('.content-message-icon').click(function(){
//add click logic here
});
});

you are not using
$(document).ready()

Other answers have mentioned using jQuery's document ready, but nobody (yet) has explained why, or what the other way to do it is. So: you can't reference an element from JavaScript (with or without jQuery) if the element has not been parsed yet. To assign an event handler (or do any other element manipulation from JS) the two ways to be sure the element has been parsed are:
Put the script block after the element in the page source - anywhere after will work, but after all elements and just below the closing </body> tag is reasonably standard.
Put the relevant code in a $(document).ready() handler (if using jQuery) or in an onload handler.
(The document ready handler is created at the point where that code is included, even before the elements it manipulates have been parsed, but it doesn't get executed until the whole document is ready.)

Try taking out the empty tag. The behavior of might be interfering here.

This should work working..
Possible cause..
Jquery version = try other
Browser Problem = try all browser
enclose into this jquery
$(document).ready(function()
{
...click event
});

Try this
<script type="text/javascript">
$(".content-message-icon").live("click", function () {
alert("Handler for .click() called.");
});
</script>