Forum PHP.pl > Problem z przetwarzaniem tagow przez jQuery

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Problem z przetwarzaniem tagow przez jQuery

butterflydaniel

23.01.2009, 01:28:14

Wczoraj po przeczytaniu jednego z tutoriali jQuery zabralem sie za kodowanie bo spodobal
mi sie ten mechanizm. Po paru godzinach kodzenia natknolem sie na nietypowy problem.

Powiedzmy ze mamy dwa pliki

plik d.html :

CODE

<html>
<head>
<title>Przykład 1-1</title>
<script type="text/javascript" src="./JQ.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#111 .b').click(function(){
$('#111').load('z.html');
});
$('#222 .c').click(function(){
alert('cos tam');
});
});
</script>
</head>
<body>
<p id="111">
<a class="b">klasa b</a>
</p>
<p id="222">
<a class="c">klasa c</a>
</p>
</body>
</html>

oraz plik z.html

CODE

<p id="222"><a class="c">klasa c</a></p>

Problem polega na tym ze po wczytaniu pliku z.html do tagu <p id="111"> wpisany tag nie
jest oblsugiwany przez jQuery. W pliku glownym (d.html) jest identyczny tag jak z pliku
z.html i jest on caly czas obslugiwany przez jQuery.

Czy wie ktos dlaczego to nie dziala i jak poradzic sobie z takim problemem?

Z gory dzieki.

nospor

23.01.2009, 08:07:19

po pierwsze: wczytujesz pola z id, ktore już sa wczesniej w dokumencie. ID jak sama nazwa mowi musi byc unikalne
po drugie: domyslam, ze chodzi ci o zdarzenie onclick. Zdarzenie onclick przypisujesz przed pobraniem z.html tak wiec ci nie dziala dla danych z z.html
(tak wiem, onclick jest po load z.html ,ale pamietaj ze ajax wykonuje sie asynchronicznie)

ziqzaq

23.01.2009, 08:13:20

Dodam jeszcze to livequery (ktoś podawał na forum, nie testowałem).

butterflydaniel

23.01.2009, 15:50:00

Dzieki za pomoc.

Jako rozwiazanie z uzyciem LiveQuery podam troche rozszerzana wersje mojego problemu.

Rozszerzenie problemu polega na tym ze po nacisnieciu <a class="c">klasa c</a>
powinien zmienic sie na <a class="b">klasa b</a> i vice versa przez caly czas urzytkowania. Aby dzialalo to poprawnie musialem pozbyc sie powtarzajacych tych samych id z tagu <p>

Oto rozwiazanie z urzyciem LiveQuery

Plik d.html :

CODE

Przykład 1
<html>
<head>
<title>Przykład 1</title>

<script type="text/javascript" src="./JQ.js"></script>
<script type="text/javascript" src="./jquery.livequery.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = function(){
var id = '#'+$(this).parent().attr("id");
$(id).load('b.html');
return false;
};
var c = function(){
var id = '#'+$(this).parent().attr("id");
$(id).load('c.html');
return false;
};

$('.c').livequery('click',

;
$('.b').livequery('click', c);
});
</script>
</head>
<body>
<p id="111">
<a class="b">klasa b</a>
</p>
<p id="222">
<a class="c">klasa c</a>
</p>
</body>
</html>

Plik b.html

CODE

<a class="c">klasa c</a>

Plik c.html

CODE

<a class="c">klasa c</a>

Dodatkowo uzylem "var id = '#'+$(this).parent().attr("id");" zeby pokazac w jaki sposob odnosic sie do id gdy nie jest on znany (np; wygenerowany przez php z danych pobranych z bazy danych)

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.