.Show (): Jak zadzwonić. Pokaż () na określonym elemencie

Naprawiłem mój kod, ale mam zachowanie glebowe. W szczególności, gdy mysz nie jest już dłużej na "TD.comPonent", przyciski powinny być ukryte, ale po przeniesie myszy naprawdę szybko nad różnymi "TD.comPonent, niektóre z tych elementów nadal pokazują przyciski. Jakieś myśli, jak mogłem to naprawić?

Dzięki.

Kod poniżej:

$(function() {

var $newButton = $('<button class = "new"><img class = icon src = "images/new.png" >new</img></button>');
var $deleteButton = $('<button class = "delete"><img class = icon src = "images/delete.png" >delete</img></button>');
var $saveButton = $('<button id = "save">Save</button>');

for (i = 42; i > 0; i--) {
    $table.append('<tr><td class = "number">' + i + 
        '</td><td class = "component"></td></tr>');

}

//appends to all 'td.component'
$('td.component').append($newButton).append($deleteButton);
//hides all buttons
$('button.new').hide();
$('button.delete').hide();


$('td.component').mouseover(function(e) {
    $(this).find('button.new').show();
    $(this).find('button.delete').show();
});


$('td.component').mouseout(function(e) {
    $(this).find('button.new').hide();
    $(this).find('button.delete').hide();
});

$('button.new').mouseout(function(e) {
    e.stopPropagation();
});

$('button.delete').mouseout(function(e) {
    e.stopPropagation();
});

});