Search jQuery

jQuery Forum

.live() support for "load" and "ready" events

in Developing jQuery Core • 1 year ago

I propose adding support for the "load" and "ready" events to the .live() method.

One of my favorite features of jQuery is .live(), since it allows writing event handlers in a declarative manner. In stead of explicitly attaching an event handler each time a new html element is created, an event handler can be specified once using .live(), with confidence that it will be used by all html elements created in the future. Unfortunately, there are two important events currently missing from .live(): The "load" and "ready" events.

Imagine the following scenario:

- The user is shown a list of email messages that can be "starred", like in gmail.
- The HTML doesn't specify which messages are starred; the stars are added via javascript.

I would like to be able to implement this as follows:

$('.email-message').live('load', function () {
if (isMessageStarred(this)) {
$(this).addClass("has-star");
} else {
$(this).addClass("no-star");
}
}

This would set the appropriate "has-star"/"no-star" class for each .email-message element, as soon as it is created. With jQuery 1.4, this is unfortunately not possible. In stead, one would have to explicitly set the class of .email-message elements each time a new message is loaded.

This type of scenario is quite common, so support for the "load" and "ready" events in .live() would be a useful and important addition to jQuery.

Replies(7)

toltmanns

Re: .live() support for "load" and "ready" events

1 year ago

Indeed, I spent the last hour looking to see if this was supported or not.

I've got a datepicker function that I'd like to have set to live() after receiving a postback. I'd go in and modify the ajax callback function to call my function again, but I like the idea of the event bubbling.

Also there needs to be some other examples out there to show this functionality, as currently one can only find usage with the click and other mouse events.

ddoxey

Re: .live() support for "load" and "ready" events

1 year ago

Here's a page that describes the supported events.

http://api.jquery.com/live/

Looks like load and ready are just not on the list. :(

dhchow

Re: .live() support for "load" and "ready" events

1 year ago

Agreed this would be nice to have in the api.

Haven't used this plugin myself, but it does seem to achieve what you want. http://docs.jquery.com/Plugins/livequery

dave.meth..

Re: .live() support for "load" and "ready" events

1 year ago

Sorry but I'm not understanding. Since window has the load event and the ready event is available in the head as well, why can't you do this?

$(window).bind("load", function(){ ... your plugin's code for the load event ... });
$(function(){ ... your plugin's code for the ready event ... });

Both of those can be in your plugin's included js file.

albin.lar..

Re: .live() support for "load" and "ready" events

1 year ago

Those events are fired just once per page request.

I believe the purpose of this would be to trigger the event every time something is inserted in the dom.

For example: I want to add a class "odd" to every odd row in every table as current versions of IE doesn't nth-child.

"$('tr:odd').addClass('odd')" would do it, but not with content added later with ajax.

Kevin B

Re: .live() support for "load" and "ready" events

1 year ago

and you can do that with the ajaxStop method pretty easily,

$("#myTable").ajaxStop(function(){
$(this).find('tr:odd').addClass('odd');
$(this).find('tr.odd:even).removeClass('odd');
});

or you can bind a custom change event to your table and trigger that event any time you add rows to the table.

Edit: here's a thread with a piece of code that triggers an insert event that you can use with .live every time an element is added with a jquery method.

https://forum.jquery.com/topic/feature-request-onlive-event

-- Kevin

albin.lar..

Re: .live() support for "load" and "ready" events

1 year ago

Thank you!

I tried that but it didn't work. Maybe ajaxStop fires before the content is appended. I didn't want to try to delay as that would be about as dirty as my current solution (and the selection would already have been made at that point I suppose). Also: Elements could be inserted to the dom without ajax being invloved.

About that other thread I assume you mean the jsfiddle-snippet posted by rwaldron? I don't think this solution is what I'm looking for at all. I want a general, safe and easy jQuery implementation which all parts of the development team can use and understand, so +1 for this topic!