Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] Dynamiczne dzieci
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Fifi209
31.05.2011, 21:51:07
Mam pojemnik (div content), do którego mam przyczepione zdarzenie click, które z kolei wykonuje kod:
[JAVASCRIPT] pobierz, plaintext 
  1. $("#content").append('<div class="text"><div class="menu"><div class="edit" alt="Edit"></div><div class="move" alt="Move"></div><div class="del" alt="Delete"></div></div></div>');
[JAVASCRIPT] pobierz, plaintext


Podpinam zdarzenie:
[JAVASCRIPT] pobierz, plaintext 
  1. $(".text").live('click', 
  2. 			function() {
  3. 				alert(1);
  4. 			}
  5. 		);
[JAVASCRIPT] pobierz, plaintext


Zamiast alerta próbowałem np:
[JAVASCRIPT] pobierz, plaintext 
  1. $(this).children("div").show();
  2. $(this).children().show();
[JAVASCRIPT] pobierz, plaintext


Bez skutku... Jak więc dobrać się do "menu" ?
zegarek84
31.05.2011, 23:47:51
już jakiś czas nie pisałem w js i w zasadzie prawie nigdy nie korzystałem z jQuery ale taka mała uwaga gdy patrzę na strukturę html'a i Twój kod to niby to powinno działać z małym zastrzeżeniem - masz podpięte zdarzenie pod ten sam kontener do którego dodajesz elementy i zapewne na tym zdarzeniu masz ustawione coś w stylu stopPropagation lub return false - dlaczego tak wnioskujęquestionmark.gif - w sumie nie przeglądałem kodu źródłowego funkcji live ale chyba ona podpina zdarzenie pod body lub sam html i sprawdza elementy od target'a...

rozwiązanie napisałem prawie w czystym js - prawie gdyż nie chciało mi się rozpisywać z targetem - już kilka razy stosowałem podobne rozwiązania coby podpinać tylko jedną funkcję na tysiące elementów i stosowałem routing w zalezności od niektórych warunków - kod pisany z palca i teraz nie testowany - jeśli coś nie działa to albo daj całą stronę albo luknij co tam konsola wypluwa i delikatnie sam sobie poprawisz (generalnie niby klika podpinam pod główny kontener ale w niczym to nie przeszkadza ;]):
[JAVASCRIPT] pobierz, plaintext 
  1. var nContent = document.getElementById('content');
  2. var oClassCallback = {};
  3. oClassCallback['text'] = function(e){alert(1);};
  4. oClassCallback['menu'] = function(e){alert(this.innerHTML);};
  5. oClassCallback['edit'] = oClassCallback['move'] = oClassCallback['del'] = function(e){alert(this.getAttribute('class'));};
  6.  
  7. var fContent = function(e){
  8.   var nTarget = e.target, sClass;
  9.   if(nTarget.nodeType!==1) nTarget = nTarget.parentNode;
  10.   // wywołanie callbacków tylko dla dzieci
  11.   while(nTarget!==nContent){
  12.     sClass = nTarget.getAttribute('class');
  13.     sClass && (oClassCallback[sClass] instanceof Function) && oClassCallback[sClass].call(nTarget, e); // a jeszcze eventa z jQuery przerzuciłem dalej jakbyś potrzebował ;D
  14.     nTarget = nTarget.parentNode;
  15.   }
  16.   nTarget = e = sClass = null;
  17. };
  18. $(nContent).click(fContent);
[JAVASCRIPT] pobierz, plaintext


ps.
sprawdziłem na szybko na tym forum - podpiąłem pod body i callbacka z this.innerHTML dałem na signature (podpisy) - działa poprawnie ;]
edit - jeszcze jakbyś potrzebował na routingu eventa z jQuery to przerzuciłem go dalej w call...

a stopPropagation przy tej metodzie sam sobie prosto możesz zaimplementować przy jeszcze jednym warunku w while ;]
Fifi209
1.06.2011, 07:18:59
Dziękuję za poświęcenie swojego czasu, jednak zależy mi na rozwiązaniu w jQuery.
Muszę podpinać poprzez .live ponieważ są to div'y tworzone dynamicznie, tylko nie wiem jak później dobrać się do kolejnych, teoretycznie z tego co znalazłem na necie powinno działać. smile.gif

Jeszcze się nad tym pogłowię, może w międzyczasie znajdzie się spec od jQuery, który będzie znał podobny przypadek. ;-)
tvister
1.06.2011, 07:45:52
Elementy tworzone dynamiecznie i tak są w dom-ie więc śmiało można pod nie podpinać event-y.
Ewentualnie late bind-ing (live) czyli tak jak stosujesz w przykładzie.
Coś namieszałeś. Testowałem w firebugu i (tu standarowa odpowiedz administratora nr. 1) więc
może twój opis problemu wymaga doprecyzowania ?
zegarek84
1.06.2011, 07:56:41
wypróbuj ten kod - zdarzenie jest podpięte pod istniejący element a sprawdzane sa dzieci które mogą istnieć w DOM dopiero później - dzieci tego elementu pod który jest podpięte zdarzenie
[edit]
jak tak ciężko wkleić kod i sprawdzić w przykładowym html'u to masz ;p
[HTML] pobierz, plaintext 
  1. <html> 
  2. <head> 
  3. <title>Formularz kontaktowy</title> 
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  5. <script type="text/javascript">
  6. $(function() {
  7. 	var nContent = document.getElementById('content');
  8. 	var oClassCallback = {};
  9. 	oClassCallback['text'] = function(e){alert(1);};
  10. 	oClassCallback['menu'] = function(e){alert(this.innerHTML);};
  11. 	oClassCallback['edit'] = oClassCallback['move'] = oClassCallback['del'] = function(e){alert(this.getAttribute('class'));};
  12.  
  13. 	var fContent = function(e){
  14. 	  var nTarget = e.target, sClass;
  15. 	  if(nTarget.nodeType!==1) nTarget = nTarget.parentNode;
  16.  	 // wywołanie callbacków tylko dla dzieci
  17.  	 while(nTarget!==nContent){
  18. 	    sClass = nTarget.getAttribute('class');
  19.  	   sClass && (oClassCallback[sClass] instanceof Function) && oClassCallback[sClass].call(nTarget, e); // a jeszcze eventa z jQuery przerzuciłem dalej jakbyś potrzebował ;D
  20. 	    nTarget = nTarget.parentNode;
  21. 	  }
  22. 	  nTarget = e = sClass = null;
  23. 	};
  24. 	$(nContent).click(fContent);
  25. });
  26. </script>
  27. <script type="text/javascript">
  28. $(function(){
  29. 	$("#content").append('<div class="text"><div class="menu"><div class="edit" alt="Edit">edit</div><div class="move" alt="Move">move</div><div class="del" alt="Delete">delete</div></div></div>');
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. <div id="content"></div>
  35. </body>
  36. </html>
[HTML] pobierz, plaintext
Fifi209
1.06.2011, 10:13:12
Popatrzyłem dokładniej w narzędziach developerskich (Chrome) i powiem, że wszystko działa teoretycznie jak należy.

Problem jest następujący: jQuery dodaje style="display: block;" a w css mam: display: none !important;
Tutaj pojawia się problem, bo to co dodaje jQuery nie chce nadpisywać css'a.

Jak pokazać, że się jest debilem to do końca.

Rozwiązanie problemu:
[JAVASCRIPT] pobierz, plaintext 
  1. $(this).children('div').css('display', 'block !important');
[JAVASCRIPT] pobierz, plaintext


Nie do końca jak chciałem (miała być animiacja) ale trudno.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.