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() ?

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() ?

• javascript
• jquery
• events
• jquery-events

• on is a replacement for bind, live and delegate, but not the shorthand methods. If you ask out of curiosity, fine, but you don't have to change your code to use .on. – Felix Kling Commented Jan 23, 2012 at 17:57
• @FelixKling I'd like to figure out the fastest way. – ryanve Commented Jan 23, 2012 at 18:47
• @FelixKling and yea, also just curious. – ryanve Commented Jan 23, 2012 at 18:56

3 Answers 3

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.

.ready(), .resize(), and others like .mouseover() are all just short-cuts for using the .bind() function (or .on() in jQuery 1.7+). .resize(function () {}) maps to .bind('resize', function () {}). Here is how your code would look using .on() wherever possible:

$(document).on('ready', function() {

    $(window).on('resize', function() {

         // Stuff in here happens on ready and resize.

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

});//ready

Here is a demo: http://jsfiddle.net/qMBtP/

Bind it both the load and resize event as below:

$(window).on('load resize', function () {
// your code
});

Much simpler - hope this helps.