attaching events to window.on("load", function(){}) in jquery

Question

I've written some code that works like a jquery plugin, assigning css to elements based on their height in relation to each other. I am stuck trying to figure out how to make the plugin work without calling/wrapping it in a window.on("load", function(){}) block from OUTSIDE of the function. I should add that everything runs fine if I call it from within an external

 $(window).on("load",function(){}) 

block. My two questions are:

1. how many different times can I assign actions to the $(window).on("load", function(){}) event? If I assign something more than once will each subsequent assignment replace the first and should I be adding something like the javascript addEventListener method instead?

2. How do I assign my action to this event from within the

    (function( $ ) { $.fn.resizeCss = function() {}; })(jQuery);
   

   block?

really stumped here, any help would be greatly appreciated.

Solution

You should be able to assign actions to that $(window).on("load"... as many times as you want. One of the main benefits of using .on is that it gives you the ability to namespace your event handlers, if you so choose.

For example, in:

$(window).on("load.loading1", function(){}) 

the loading1 is the name of that particular instance of the event handler. This is helpful because you can choose to remove handlers based on their names, in addition to their events.

For example:

$(window).off("load.loading1")

will unbind ONLY the loading1 event handler, where as

$(window).off("load")

will unbind ALL of the load event handlers.

As for your second question, I apologize for the confusion, but I was mistaken about (function($). It actually means that the code within it is self-executing. In other words, it executes on its own time, automatically and need-not be put into a handler.

I still suggest that you bind it externally, as it is better coding practice and will generally make your plugin more extensible.

UPDATE

Based on your comments, I can tell you that you can make it so that the $(window).load doesn't have to be typed by the developers who use your plugin, but it is very bad coding practice. It would make your plugin significantly less extensible, however. Also, if you do this with $(document).ready, it would only work if the caller of the plugin is not an element. The reason for this is because the element that it is called on would have to have been found by jQuery, and, in order for it to have been found, the document must have been ready for it to be visible.

What you can do is add the $(window).load handler within your plugin, itself. In other words, it would be inside of the function declared with $.fn..... You would probably also want to create some feedback so that your developer can tell if the function was called before the window was loaded. However, as previously stated, I highly advise against this. The better thing to do is to make a note in your documentation that the plugin should generally be called from the $(window).load... event. That's really something that should be left up to the developers.