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
Solution
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" );
});
OTHER TIPS
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
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");
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"); });