hover is not working

hover is not working


Hi,
I am preparing the table content using ajax call. I am preparing each
<tr>, and appending to table body. Table content is displaying
properly. I want to implement hover for each row. I did like below,
but it is not working.(hover is not working).
I think append will not inject <tr> into HTML. Is because of this it
is not working? If so, How can I achieve this?
Please Help me on this.
$(document).ready(function() {
    var accountDet = $("#pendTxnAcct option:selected").val();
    var url = '/p/eb/PendTrans_Action.serv';
    $.getJSON(url,{accountDet: accountDet},function(data) {
var i=0;
$.each(data['pendingRecords'], function(entryIndex, entry) {
    var html='<tr valign="middle" class ="DSSdrbgl">';
    html += '<td align="left" valign="middle" >
    html += '<td align="left" valign="middle" > '+entry['txnTotalAmt']
+'</td>';
    html += '<td width="15%" align="center" valign="middle" >'+entry
['txnValueDt']+'</td>';
    html += '</tr>';
    $('table.gtb_table').children('tbody').append(html);
    });
});
return false;
});
$(document).ready(function() {
    $('.gtb_table').each(function(){
        alert("hover");
        alert($(this).children('tbody').children('tr').length);
        $(this).children('tbody').children('tr').hover(
            function(){alert("hover");$(this).addClass('gtb_rowHover')},
            function(){alert("hover");$(this).removeClass('gtb_rowHover')}
        );
    });
});