.append() .mouseover() i problem z DOM

Witam. Mam tabelkę, w której po najechaniu myszką na o odpowiedniej klasie zmieniam sobie styl css dla tej komórki.

$('.id_szkolenia').mouseover(function(){
    $(this).css("cośtam")
}).mouseout(function(){           
    $(this).css("cośtam2");
}); 

Teraz w wyniku kliknięcia na zupełnie inny element zostaje wykonany .append():

$('table#listaSzkolen').append("<tr><td class='id_szkolenia'></td></tr>");

Wiersz ładnie się dodaje, ale jest niewidoczny dla pierwszej części kodu :( Podejrzewam, że dlatego, że pierwotny model DOM nie zawiera tego nowego ... Ma ktoś pomysł co z tym zrobić?

może zastąp ten bałagan cssem?

.id_szkolenia:hover {
  /* styl */
}

potem nawet po aktualizacji dom styl będzie miał zastosowanie.
same profity:

1. to, co chcesz osiągnąć będzie osiągnięte
2. mniej javascriptu, który nie służy do stylowania
3. javascriptowe stylowanie jest wolniejsze od regułek css
4. działa bez javascriptu :D

Koniecznie zrób tak jak mówi dzek69. To, chcesz zrobić -- połączenie mouseover i mouseout, przy których zmieniasz CSS -- to klasyczny przykład na użycie pseudoklasy :hover w CSS-ach. Tak, można jej użyć nawet na elementach td lub jakichkolwiek innych. Zadziała od IE7 wzwyż.

JAKO CIEKAWOSTKE powiem, że masz rację co do przyczyny problemu. Chodzi o to, że przypisujesz zdarzenia mouseover/mouseout tylko do tych elementów, które w danej chwili istnieją -- a nie tych, które będą wstawione w przyszłości.

Twój problem rozwiązałaby tzw. delegacja zdarzeń. Czyli -- w starszych jQuery -- funkcja .delegate(), lub w nowszych funkcja .on().

Wyglądałoby to jakoś tak:

$('#listaSzkolen').on({
  mouseover: function() {
    $(this).costam();
  },
  mouseout: function() {
    $(this).costam();
  }
}, '.id_szkolenia');

Jak to działa? Ano mówimy elementowi #listaSzkolen, by przechwytywał wszystkie zdarzenia mouseover oraz mouseout, które zajdą na jakimkolwiek elemencie wewnątrz niego. Na końcu podajemy jednak selektor .id_szkolenia, który oznacza, że interesują nas tylko te zdarzenia, które zaszły na elemencie o klasie id_szkolenia.

Tutaj nie ma problemu, bo w momencie gdy wywołujemy funkcję .on(), deklarujemy, że wszystkie zdarzenia, które zajdą wewnątrz niego, mają być oddelegowane do niego. W tym momencie jQuery nie sprawdza nawet jakie są tam elementy. Dopiero gdy wystąpi zdarzenie mouseover to jQuery sprawdzi, czy zostało tak naprawdę wywołane na elemencie o klasie .id_szkolenia. To, że element ten doszedł do tabeli dopiero przed chwilą w niczym nie przeszkadza.