How come anonymous jQuery callbacks don't fire?

Question

According to the documentation this should work:

$('#content').on( 'load', function(event){
    alert('ready')
})

But it doesn't. http://jsfiddle.net/SJKqt/

This does work:

$('#content').on( 'load', alert('ready') )

But I can't get anonymous functions to run at all.

you are actually passing the result of alert('ready') as a parameter to the on function, which is why you see it "working" — Stefan H, May 29 '12 at 22:21
Because this is a duplicate. Hint: what is the *result* of the expression `(function () { ... })` what is the *result* of the expression `(alert('ready'))`? It is the *result* which is passed.. — , May 29 '12 at 22:21
http://stackoverflow.com/questions/8462381/settimeout-callback-executed-immediately — , May 29 '12 at 22:23
I don't understand your questions or see how that other post relates to my problem. So you guys are telling me that the thing that shouldn't work is working and the thing that should work isn't. So...how do I make the thing that should work work? — Moss, May 29 '12 at 22:29
@Moss Try changing the event to click - then see what happens. You'll notice that with your second piece of code, it alerts on page load, whereas the first code block will alert on click. — Stefan H, May 29 '12 at 22:32
I also "linked", not "voted to close as a dupe" as the issue (of the "callback running immediately") applies. — , May 29 '12 at 22:32
@Moss to sum up your issue - you are having problems binding a handler to the load event of a div, NOT with binding an anonymous function to an event. — Stefan H, May 29 '12 at 22:35
Ok, I understand, the callback is never really being called. — Moss, May 29 '12 at 22:35

score 2 · Accepted Answer · answered May 29 '12 at 22:27

2

The onload event is supported on the following elements:

<body>, <frame>, <frameset>, iframe, <img>, 
<input type="image">, <link>, <script>, <style>

So I guess you are not registering the handler on one of them.

answered May 29 '12 at 22:27

Headshota

21,021
11
61
82

I believe the whole point of the jQuery load event is to work on any element when it is done loading all its content. – Moss May 29 '12 at 22:33
@Moss - Nope, javascript does not fire the load event for everything, the issues is simply that the div element does not have a load event to bind to. – Stefan H May 29 '12 at 22:37
Headshota, could you please link to where you got that list? – Stefan H May 29 '12 at 22:38
OK, the jQuery documentation makes it sound like it works for everything at first and then explains that it doesn't. "The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object." – Moss May 29 '12 at 22:39
So how do I fire something when an arbitrary element loads? :( – Moss May 29 '12 at 22:40
you can append a javascript code right after the element :), if it's a plain elemenet (which doesn't require another request to be loaded) – Headshota May 29 '12 at 22:41
@Stefan H I got that from W3Schools :) – Headshota May 29 '12 at 22:43
The problem is I replace the element with ajax content sometimes and I want the code to fire again. I guess I have to put it in the ajax callback too. – Moss May 29 '12 at 22:43
@Moss The second answer here is likely going to help you out: http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery – Stefan H May 29 '12 at 22:46
The one by Emile? It doesn't make sense to me (how is the custom action triggered)? And I don't think anything there waits until loading is finished. They are talking about triggering as soon as anything changes. – Moss May 30 '12 at 01:34

score 0 · Answer 2 · answered May 29 '12 at 22:28

From the jQuery page on .load():

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser

It doesn't fire correctly in WebKit if the image src is set to the same src as before

It doesn't correctly bubble up the DOM tree

Can cease to fire for images that already live in the browser's cache

Note: The .live() and .delegate() methods cannot be used to detect the load event of an iframe. The load event does not correctly bubble up the parent document and the event.target isn't set by Firefox, IE9 or Chrome, which is required to do event delegation.

Your jsFiddle is running in an iframe, which may be one explanation for why your code isn't working there.

you might have wanted to get the documentation for .on() instead of .load(), considering the question is not asking about .load()... — Stefan H, May 29 '12 at 22:29
@StefanH Yes, but this bit about the problems with the load event is on the page I linked to, rather than the page about `on()`. Don't all events redirect to `on()` now anyway? — Gareth, May 29 '12 at 22:30
@Moss In that case, I'd say that Headshota has it right - you're attaching the event to an element that doesn't fire it. — Gareth, May 29 '12 at 22:32

How come anonymous jQuery callbacks don't fire?

2 Answers2