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

[kamil4u]

Kod w moim poście, to wersja demo

Problem w tym, że nie. Prosiłem o link do strony, gdyż dzięki temu mogę samemu przeanalizować co się tam dzieje, pozmieniać coś za pomocą firebug-a i posprawdzać konsolę błędów. A tak to muszę kopiować Twoje kody i bawić się w to samemu i w sumie marnuję czas, który mógłbym już przeznaczyć tylko na pomoc i analizę kodu. Nie chcę żebyś odebrał to jako jakiś atak czy to, że mój czas jest bardzo cenny, ale też mógłbyś to trochę docenić.

Niemniej zrobiłem to, czyli przekopiowałem Twoje pliki lokalnie, dołączyłem bibliotekę jQuery i uruchomiłem skrypt. Dość szybko stwierdziłem, że to nie jest kod, który masz na swojej stronie, gdyż konsola błędów wskazuje błędy. Chyba, że jesteś na tyle początkujący, że nie korzystasz z konsoli, w takim razie gorąco Cię do tego zachęcam, bo to bardzo ułatwia życie programiście JS. Błąd polega na tym, że w funkcji "viewer_functions", w pierwszej linii nie masz " w $(.viewer).

Tak więc proszę o link do konkretnego demo, chyba, że rzeczywiście jedynym błędem był brak tego " (IMG:style_emoticons/default/smile.gif)

Pozdrawiam