How to add event handler with Prototype new Element() constructor?

Question

I'm inserting an img tag into my document with the new Element constructor like this (this works just fine):

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

I would like to trigger a function when this image loads, but I can't figure out the correct syntax. I'm guess it's something like this (which doesn't work).

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

I'm hoping to do this in the same line of code and not to have to attach an event observer separately.

EDIT: The event needs to be registered when the element is created, not after. If the image loads before the event is attached, the event will never fire.

Answer 1

You might have 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, because insert returns the element, you could inline Element.observe

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

Answer 2

Try

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

Answer 3

The "onload" code shouldn't need to be wrapped up into an event handler. You are essentially loading the element right there, just put the code after the insert.

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...

Answer 4

It kind of 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 attributes object just get inserted as strings, so when you do "onload: function() {...}" it turns into:

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

Which doesn't actually execute the code inside the function, it just defines a new anonymous function that won't execute unless you tell it to.

---

If you wanted to be a ninja about it, you could 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 kind of crazy, those options give you the actual function object to work with in case you need it.

Answer 5

In this case, the best solution is to not use Prototype or at least not exclusively. This works:

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

The key is setting the onload directly instead of letting Prototype's wrapper do it for you, and set the src last (actually not sure about that, but I do it last to be safe).

One-liners are overrated. With proper use of local variables the above is just as good. If you must have a one-liner, create a wrapper function or hack the Prototype core to ensure proper assignment (submit a patch!).