Custom JavaScript as DOM node attribute to perform when it's ready

Question

Can I add a custom JavaScript as some DOM node attribute to perform when it's ready like JavaScript added as "onClick" attribute performed when you click on it?

Suppose i need to process a div element with some funcMyTransform function.

I think it'll be more elegant to write smth like this

<div onReady=funcMyTransform(this)>...</div>

Instead of

<div id="MyElement">...</div>

<script type="text/javascript">
    $(document).ready(function(){$("#MyElement").funcMyTransform()});
</script>

Is there such "onReady" attribute or something?

Answer 1

Have you tried the jQuery ready?

 $("#MyElement").ready(function(){$(this).funcMyTransform()});

I'm guessing this won't work but worth a shot?

Answer 2

There is no onReady event. Depending on the functionality, you may want to abstract funcMyTransform out to a jQuery plugin. E.g.

jQuery.fn.funcMyTransform = function() {
    alert(this.id);
};

jQuery(document).ready(function(){
    jQuery("#MyElement").funcMyTransform(); // Alerts => "MyElement"
});

If you want access to the element as soon as its "ready", then placing your script at the bottom the document (before </body>) would probably be a better idea, and is definitely faster (albeit slightly) to initiate than jQuery's pseudo "ready" event.

Answer 3

Your suggestion that mixing code with the HTML as ... more elegant is arguable.

 <div onReady=funcMyTransform(this)>...</div>

In general this is discouraged as it leads to maintenance problems. If I understood you correctly, on the onReady event being activated you want to call all these functions. One way to do it actually is to use a REL or anything else you might want to use as an expando attribute.

On document ready capture all the elements and read the attribute's value, then eval(). (People will tell you eval() is evil, but is quite harmless here).

$(document).ready(function(){ var v= $('.class_name').attr('rel'); eval(v); })

It will actually eval() and activate all your javascript within your REL attributes.

Answer 4

As others have said, onWhatever attributes are "like so 1999" ;-). The general consensus among the modern Javascript community is that you should avoid using them as much as possible (for maintainability and other reasons).

That being said, there is a way to get something very similar to what you want in a much more maintainable fashion:

<div class="onReadyDoMyTransform">...</div>

<script type="text/javascript">
    $(function(){$(".onReadyDoMyTransform").funcMyTransform()});

    // $(someFunction) == $(document).ready(someFunction);
</script>

This approach will give you all the benefits of being able to decide what "transforms onReady" in your HTML layer, but without all the failings of an "onReady" attribute. The script part can just go in to a common JS include that you use throughout your site, so you don't have to worry about adding it along with every DIV.onReadyDoMyTransform.

Answer 5

I have used er (element-ready) by Stuart Colville before that is somewhat similar to what you are talking about, except for it's not an element attribute.

http://muffinresearch.co.uk/archives/2006/04/12/element-ready/

I have used this in an instance where I was returning some html via an XHR request and I wanted it to execute some javascript, but the dom had to be finished loading before I could execute it. Of course document ready didn't work, since the main document was already loaded.