Having trouble applying CSS to table rows created via ajax request.
Despite using jQuery to add CSS to newly generated rows, it only affects the existing table headers. The table already has a 'sortable' class which also doesn't apply to dynamically inserted rows from the ajax call.
What could be the reason for this behavior?
JavaScript
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 > 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 += '<tr valign="top">' +
'<td class="supplier">' + item.name +
'</td><td class="mainsupplier">' + item.mainsupplier +
'</td><td class="price">' + item.price +
'</td><td class="articlecode">' + item.partno +
'</td></tr>';
});
$('#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();
}
});
HTML
<table id='supplier_table' class='sortable' width='100%'>
<THEAD>
<tr valign='top'>
<th width='25%'>Supplier</th>
<th width='25%'>Mainsupplier</th>
<th width='25%'>Price</th>
<th width='25%'>Articlecode</th>
</tr>
</THEAD>
<TBODY >
</TBODY>
</table>