Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bind to ready and resize at same time using jQuery .on()

This works for running the same code on both ready and resize:

$(document).ready(function() {

    $(window).resize(function() {

         // Stuff in here happens on ready and resize.

    }).resize(); // Trigger resize handlers.       

});//ready

How would you accomplish the same result using jQuery.on() ?

like image 937
ryanve Avatar asked Jan 23 '12 17:01

ryanve


People also ask

What is difference between $( document .ready function () vs $( function ()?

The key difference between $(document). ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc.

What is the use of $( document .ready function (){ }); jQuery code?

$( document ).ready()A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

What does $( document .ready mean in JavaScript?

The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ). ready() method will run once the page DOM is ready to execute JavaScript code.

What is Resize event in jQuery?

The resize event occurs when the browser window changes size. The resize() method triggers the resize event, or attaches a function to run when a resize event occurs.


1 Answers

on can be used to wire up the resize and ready events just like any other event.

So for your case, you could create a function that has the code you want to happen for resize and ready, and then pass it to both calls to on.

If you want to keep your enclosing scope clean, you could do all this in an immediately executing function:

(function() {
    function stuffForResizeAndReady(){
       // Stuff in here happens on ready and resize.
    }

    $(window).on("resize", stuffForResizeAndReady);
    $(document).on("ready", stuffForResizeAndReady);
})();

2012-07-25: There are 2 differences to be aware of when using .on() to attach ready handlers:

  • Ready handlers added via $(fn) and $(document).ready(fn) are "retro-fired" while ones added by .on() are not. Using those, if you add a handler after the DOM is already loaded, the fn will be fired immediately. If you add a handler via .on('ready', fn) after the DOM is loaded, it will not be fired by jQuery, but you can manually .trigger('ready') it.

  • When you use $(fn) or $(document).ready(fn) to add a ready handler, the fn receives jQuery as its 1st arg, allowing the familar jQuery(function($){ }) usage. If you use $(document).on('ready', fn), the 1st arg that the fn receives is an event object. In both cases this inside the fn is the document. If you were to do something abnormal like $('#foo').on('ready', fn) for the purpose of triggering, this would be the #foo element.

like image 124
Adam Rackis Avatar answered Sep 20 '22 13:09

Adam Rackis