title: Adding CSS to table rows created with jQuery
body: <p>I have a problem with adding CSS to tablerows that are created through ajax.</p>
  
  <p>When I use jQuery to add the CSS to the newly created rows it doesn't get applied only to the existing table header, also the table already has a class 'sortable' which also doesn't get applied to the rows created with the ajax call</p>
  
  <p>why is this?</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var timer;
  
  $('#order_supplier').on('keyup', 'input', function(){
  
      var articlecode = $(this).val();
      var article_description = $(this).closest('tr').next('tr').find('.article_description');
      var table_values = $('.supplier, .mainsupplier, .price, .articlecode');
  
      clearTimeout(timer);
  
      if(articlecode.length &gt; 0) {
          timer = setTimeout(function(){
              $.ajax({
                              type: 'POST',
                              data: 'articlecode='+ articlecode,
                              dataType: 'json',
                              url: 'bart_test3.php',
                              success: function(result){
                  if(result){
                      var tr = '';
  
                      $.each(result, function(i, item){
                          $(article_description).css("font-style", "").val(item.descr);
  
                          tr += '&lt;tr valign="top"&gt;' +
                              '&lt;td class="supplier"&gt;' + item.name +
                              '&lt;/td&gt;&lt;td class="mainsupplier"&gt;' + item.mainsupplier +
                              '&lt;/td&gt;&lt;td class="price"&gt;' + item.price +
                              '&lt;/td&gt;&lt;td class="articlecode"&gt;' + item.partno +
                              '&lt;/td&gt;&lt;/tr&gt;';
                      });
  
                      $('#supplier_table tr:even').addClass('even');
                      $('#supplier_table tr:odd').addClass('odd');
                      $('#supplier_table').append(tr);
  
                  } else {
                      $(article_description).css("font-style", "italic").val('Invalid article code');
                      $(table_values).remove();
                  }
              }});
                      }, 100);
      } else {
          $(article_description).css("font-style", "italic").val('No article code specified');
          $(table_values).remove();
      }
  
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table id='supplier_table' class='sortable' width='100%'&gt;
      &lt;THEAD&gt;
          &lt;tr valign='top'&gt;
              &lt;th width='25%'&gt;Supplier&lt;/th&gt;
              &lt;th width='25%'&gt;Mainsupplier&lt;/th&gt;
              &lt;th width='25%'&gt;Price&lt;/th&gt;
              &lt;th width='25%'&gt;Articlecode&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/THEAD&gt;
      &lt;TBODY &gt;
      &lt;/TBODY&gt;
  &lt;/table&gt;
  </code></pre>