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

Daj link do demo( uproszczona wersja strony ).

Prawdopodobnie przy wyszukiwaniu elementu klasy, skrypt sam "nie wie", który element ma wziąć. Jak wiadomo, elementów o tej samej klasie może być wiele i przy używaniu .klasa zwracana jest tablica elementów( dokładnie obiektów jQuery ) i Ty jako programista musisz wskazać, o który element Ci chodzi.

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.

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 "

Pozdrawiam

Gdybyś czytał ze zrozumieniem moje posty, byłoby znacznie łatwiej się nam dogadać.

Pozwól więc, że w ramach wyjaśnienia wypunktuję Ci odpowiedzi na najbardziej nurtujące Cię pytania:

- To nie jest oryginalny kod - oryginalny jest bardziej złożony i nie ma najmniejszego sensu go tutaj udostępniać, gdyż jedynie ten fragment sprawia problemy.
- Kod zamieszczony tutaj pisałem "na poczekaniu", by zobrazować sytuację, tak więc jakieś tam niedopatrzenia mogły się zdarzyć, ale podkreślę to jeszcze raz, to nie jest oryginalny kod, który mam na serwerze, tak, że ten brak " nie ma tutaj najmniejszego znaczenia
- Kod na serwerze działa bezproblemowo przy pierwszym wczytaniu zawartości pliku project.php, tak więc nie może być żadnych błędów w zapisie, nieprawdaż?

Jedynie przy każdym następnym wczytaniu zawartości tego pliku do elementu "viewer", skrypt nie znajduje elementu "popup", lecz ponownie przy pierwszym wczytaniu wszystko jest ok, a więc nie jest to jakiś tam brak "

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).