addClass using .live() with jQuery

Question

I am currently using the .load() function to load content into a container div dynamically. The content being loaded is table data which I'd like to zebra stripe. The zebra striping is easy on a static page, but I can't figure out how to zebra stripe the new content loaded into the container div.

Here's the code with which I'm trying to work:

$("table tbody tr:even").live("EVENT", function(){
  $(this).addClass("alt");
});

The "EVENT" shouldn't be "click", or "mouseover" but "onload" or something to that effect. Is there a way to do this? Thanks for your suggestions!

~Jared

Answer 1

You should just run the zebra striping code in the callback function for the load().

$("#myDiv").load( "/somecontroller/someaction", { data: value }, function() {
    $("#myDiv").find( "table tbody tr:even" ).addClass( "alt" );
});

Answer 2

As an extension to tvanfosson's answer (Which is your best bet in this case), the live() function currently only supports some events. This is from the docs at http://api.jquery.com/:

Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

Answer 3

To add data to table dynamically, you have to use another code. Isn't it? inside that function, after loading data to table, add css class to rows. Using below method in that function,

$("table tbody tr:even").removeClass("alt").addClass("alt");

Answer 4

I do it this way to trigger the event with jquery 1.4.2

$("body").live("mousemove", function(){ $(".zebra tr:nth-child(even)").addClass("alt"); });