0

I'm trying to find the solution but still can't find and I have to ask this.odd or even class not working with loaded content by AJAX

HTML : 

<table id="products"></table>

Jquery : 

$(function () {$("#product-table tr:odd").addClass("odd") });

Everything's normal if I add rows into table manually.But when I load rows with jquery, odd class don't work.

Yasin Yörük
  • 1,500
  • 7
  • 27
  • 51

1 Answers1

1

Your addClass function is called on the existing rows. This doesn't define a rule for new added rows.

If you can afford to limit the compatibility of this alternate row display, you should use CSS to do this because the CSS rules are executed each time the document is modified :

#product-table tr:nth-child(odd) {
    // what you would have put in the odd class
}

To be more compatible, you can also call your existing code from the callback you give to the ajax loading function :

$('someSelector').load(someUrl, function(){
   $("#product-table tr:odd").addClass("odd") 
});
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 1
    Just a note: `:nth-child` pseudo-class is added in [CSS3 specification](http://www.w3.org/TR/css3-selectors/#nth-child-pseudo) and might not be supported by some old browsers. – VisioN Oct 08 '12 at 11:31
  • +1 @VisioN Yes, that's why I precised "limit the compatibility". The link you provide might be useful if OP want to ponder the solutions. – Denys Séguret Oct 08 '12 at 11:32