[jQuery] Niemożliwość odczytania elementu po kilkukrotnym wczytaniu zawartości do tego samego elementu Opcje

[puz219]

Witam.

Napisałem sobie przy użyciu jQuery skrypt wczytujący dynamicznie zawartość pliku do elementu <div>. Do tej pory wszystko jest w porządku, jednak ów <div> zawiera w sobie kolejny, który po najechaniu na ten, do którego zawartość się wczytuje staje się widoczny, a po opuszczeniu elementu ukrywa się. Wszystko prosto i przy pierwszym wczytaniu zawartości wszystko działa, ale jeżeli wczytam już zawartość po raz drugi, ten podrzędny div już się nie wyświetla w ogóle.

Trochę skomplikowany ten opis, ale przedstawiam poniżej kod, który może naświetli co nieco tę sytuację

index.php

[HTML] pobierz, plaintext 
<div class="app">
 
<div class="column viewer"></div>
<div class="column menu">
 
<a href="#" id="cat-1" class="cat-btn">Opcja #1</a>
<a href="#" id="cat-2" class="cat-btn">Opcja #2</a>
<a href="#" id="cat-3" class="cat-btn">Opcja #3</a>
<a href="#" id="cat-4" class="cat-btn">Opcja #4</a>
<a href="#" id="cat-5" class="cat-btn">Opcja #5</a>
 
</div>
<div class="clear"></div>
 
</div>
[HTML] pobierz, plaintext 

product.php

[HTML] pobierz, plaintext 
<img src="images/sample01.jpg" />
<img src="images/sample02.jpg" />
<img src="images/sample03.jpg" />
<img src="images/sample04.jpg" />
<img src="images/sample05.jpg" />
 
<div class="popup">Element Title</div>
[HTML] pobierz, plaintext 

A teraz kod w jQuery:

[HTML] pobierz, plaintext 
$("a.cat-btn").each( function() {
 
$(this).click( function() {
 
if($(".viewer").is(":empty")) {
 
$(".viewer").load("product.php?cat=" + $(this).attr("id"), function(response, status, xhr) {
 
if(status == "success") {
 
$(this).fadeIn();
 
viewer_functions(); //funkcja odpowiedzialna za wyswietlenie diva
 
}
 
});
 
}
 
else {
 
$(".viewer").empty().hide();
 
$(".viewer").load("product.php?cat=" + $(this).attr("id"), function(response, status, xhr) {
 
if(status == "success") {
 
$(this).fadeIn();
 
viewer_functions(); //funkcja odpowiedzialna za wyswietlenie diva
 
}
 
});
 
 
}
 
});
 
});
 
 
function viewer_functions() {
 
$(.viewer).hover(function() {
 
$(this).find(".popup").fadeIn();
 
}, function() {
 
$(this).find(".popup").fadeOut();
 
});
 
}
[HTML] pobierz, plaintext 

Generalnie chodzi o to, iż po drugim wczytaniu zawartości product.php do elementu "viewer" skrypt nie znajduje już elementu "popup", przez co ten element się w ogóle nie wyświetla.

Proszę o jakieś sugestie by rozwiązać ten problem.

Z góry dziękuję za odpowiedź.

[AdIoS_Neo]

Witam,
skopiowałem cały Twój przykładowy kod i wszystko działa poprawnie, napis "Element Title" cały czas się pokazuje, jeśli się na niego najedzie to znika zgodnie z założeniem funkcji przekazanej do metody hover, jeśli się najedzie na miejsce gdzie powinien być to się pokazuje (zgodnie z założeniem). Po kliknięciu w którąś z opcji zawartość do div.viewer zostaje wczytana i nawet jeśli wcześniej div.popup znikł to po ponownym wczytaniu pokazuje się (trzeba uważać by po kliknięciu w którąś z opcji nie zostawić kursora w tym samy miejscu bo na to miejsce wskakuje właśnie element popup a opcje zjeżdżają niżej, a jak wiadomo po zjechaniu kursorem z elementu popup on znika).