Geek Answers Handbook

How to add an event handler using the prototype of the new Element () constructor?

I embed the img tag in my document using the new Element constructor (this works fine):

$('placeholder').insert(new Element("img", {id:'something', src:myImage}))

I would like to call a function when loading this image, but I cannot understand the correct syntax. I assume this is something like this (which does not work).

 $('placeholder').insert(new Element("img", {id:'something', src:myImage, onload:function(){alert("MOO")}}))

I hope to do this in the same line of code and not use a separate event observer.

EDIT: An event needs to be logged when an item is created , not after. If the image is loaded before the event is connected, the event will never fire.

0
source share
5 answers

In this case, the best solution is to use a prototype, or at least not exclusively. It works:

 var img = new Element('img',{id:'logo',alt:'Hooray!'}); img.onload = function(){ alert(this.alt); }; img.src = 'logo.jpg';

The key sets up a direct download, instead of letting the Prototype shell do it for you and install src last (not really sure about that, but I'm doing it in order to be safe).

Single line players are overrated. Using the right local variables is just as good. If you must have one layer, create a wrapper function or crack the Prototype core to ensure the correct assignment (send the patch!).

+4
source

Try

 $('placeholder').insert(new Element("img", { id: 'something', src:myImage }).observe('load', function() { // onload code here }));
+2
source

You may need to move the function elsewhere and call it by name

 $('placeholder').insert(new Element("img", {id:'something', src:myImage, onload:"javascript:moo()"})) function moo() { alert("MOO"); }

Of course, since insert returns an element, you can insert Element.observe

 $('placeholder').insert(new Element("img", {id:'something', src:myImage})).observe('load', function(){alert("MOO")});
0
source

The onload code should not be wrapped in an event handler. You essentially load the element right there, just put the code after pasting.

 var img = new Element('img', {id: 'something', src:'myImage.jpg'}); $('placeholder').insert(img); // Element has loaded! It can now be mucked around with. // The onload code goes here...
0
source

This sucks, but this is what you need to do:

 $('placeholder').insert(new Element("img", { id:'something', src:myImage, onload:'alert("MOO")' }));

The values ​​in the attribute object are simply inserted as strings, so when you execute "onload: function () {...}", it turns into:

 <img onload="function() {...}" />

Which actually does not execute the code inside the function, it simply defines a new anonymous function that will not be executed if you do not tell it.

If you want to be a ninja about it, you can do something like this:

 var moo = function() { alert("MOO"); }; $('placeholder').insert(new Element("img", { id:'something', src:myImage, onload:'(' + moo + ')()' }));

Or even:

 $('placeholder').insert(new Element("img", { id:'something', src:myImage, onload:'(' + function() { alert("MOO"); } + ')()' }));

While crazy, these parameters give you the actual function object that you can work with if you need it.

0
source

More articles:


All Articles