live changes with any modification on the DOM

I am using jQuery to apply some UI effects like adding a class to a number of elements, in the JS file i use :

$('.dataGrid').each(function(){
$(this).find('tr:odd').css('background-color', '#F7F8FA');
});

but when i use ajax to load an element with the class .dataGrid the rules up there doesn't apply, my solution was to make a function joins all cases like this one and call it every time i make an ajax request ! .. this off course is not a pro one .. i found .live() , i used 开发者_如何学编程and it worked fine with events like : $('dataGrid').live('moveover', function(){ ... }); .

the .live solution is very good with events ... is there any way to use the same concept with the effects like mentioned up there ? ... i mean a way to reapply the rules set before, every time a change takes place on these elements ( adding new one for example )

I wish i was clear enough, Thanks in advance :)

The Livequery-plugin supports triggering functions when new nodes are added to the DOM. Something like this should work:

$('.dataGrid').livequery(function() {
    $(this).find('tr:odd').css('background-color', '#F7F8FA');
}

Depending on how you are loading elements i.e. which AJAX technique you are using, you can achieve this in many ways. If you are using jQuery Ajax then you can use the jQuery.when method.

Basically with this method you can have deferred execution. You can say something like "when the ajax call completes then do this function". The syntax goes like

$.when( $.ajax("test.aspx") ).then(function(ajaxArgs){ 
     alert(ajaxArgs[1]); /* ajaxArgs is [ "success", statusText, jqXHR ] */
});

Following link will give you more information

http://api.jquery.com/jQuery.when/

Since you are using ajax to append your .dataGrid elements you could register a handler for ajaxComplete() that will handle the application of your :odd class.

$(document).ajaxComplete(function() {
  $('.dataGrid').each(function(){
    $(this).find('tr:odd').css('background-color', '#F7F8FA');
  });
});