[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ź.

[puz219]

Kod w moim poście, to wersja demo, generalnie skrypt jest bardziej zaawansowany, lecz problemem jest to, iż po ponownym wczytaniu zawartości pliku skrypt, który zaznaczę wyraźnie przy pierwszym wczytaniu poprawnie wyszukuje element i wykonuje funkcję, lecz juz po każdym kolejnym wczytaniu zawartości pliku do boxu tego elementu nie widzi.

Twoje sugestie na temat iż może być kolejny element o takiej samej klasie są niestety mylne, gdyż, sprawdziłem jeszcze raz dokładnie, i nie ma drugiego elementu o takiej klasie.

Poza tym, zrobiłem jeszcze pewien eksperyment i po wczytaniu za drugim razem zawartości do boxu, otworzyłem konsolę w chrome i po ręcznym wpisaniu $(".popup").show(); element ładnie się wyświetlił.

I właśnie nie znajduję w tym żadnej logiki.