[jquery] Dynamiczne dzieci Opcje

[Fifi209]

Mam pojemnik (div content), do którego mam przyczepione zdarzenie click, które z kolei wykonuje kod:

[JAVASCRIPT] pobierz, plaintext 
$("#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 
$(".text").live('click', 
			function() {
				alert(1);
			}
		);
[JAVASCRIPT] pobierz, plaintext 

Zamiast alerta próbowałem np:

[JAVASCRIPT] pobierz, plaintext 
$(this).children("div").show();
$(this).children().show();
[JAVASCRIPT] pobierz, plaintext 

Bez skutku... Jak więc dobrać się do "menu" ?

[zegarek84]

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ę(IMG:style_emoticons/default/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 
var nContent = document.getElementById('content');
var oClassCallback = {};
oClassCallback['text'] = function(e){alert(1);};
oClassCallback['menu'] = function(e){alert(this.innerHTML);};
oClassCallback['edit'] = oClassCallback['move'] = oClassCallback['del'] = function(e){alert(this.getAttribute('class'));};
 
var fContent = function(e){
  var nTarget = e.target, sClass;
  if(nTarget.nodeType!==1) nTarget = nTarget.parentNode;
  // wywołanie callbacków tylko dla dzieci
  while(nTarget!==nContent){
    sClass = nTarget.getAttribute('class');
    sClass && (oClassCallback[sClass] instanceof Function) && oClassCallback[sClass].call(nTarget, e); // a jeszcze eventa z jQuery przerzuciłem dalej jakbyś potrzebował ;D
    nTarget = nTarget.parentNode;
  }
  nTarget = e = sClass = null;
};
$(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 ;]

Ten post edytował zegarek84 31.05.2011, 23:58:32

[Fifi209]

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ć. (IMG:style_emoticons/default/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]

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 ?

Ten post edytował tvister 1.06.2011, 07:46:55

[zegarek84]

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 
<html> 
<head> 
<title>Formularz kontaktowy</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var nContent = document.getElementById('content');
	var oClassCallback = {};
	oClassCallback['text'] = function(e){alert(1);};
	oClassCallback['menu'] = function(e){alert(this.innerHTML);};
	oClassCallback['edit'] = oClassCallback['move'] = oClassCallback['del'] = function(e){alert(this.getAttribute('class'));};
 
	var fContent = function(e){
	  var nTarget = e.target, sClass;
	  if(nTarget.nodeType!==1) nTarget = nTarget.parentNode;
 	 // wywołanie callbacków tylko dla dzieci
 	 while(nTarget!==nContent){
	    sClass = nTarget.getAttribute('class');
 	   sClass && (oClassCallback[sClass] instanceof Function) && oClassCallback[sClass].call(nTarget, e); // a jeszcze eventa z jQuery przerzuciłem dalej jakbyś potrzebował ;D
	    nTarget = nTarget.parentNode;
	  }
	  nTarget = e = sClass = null;
	};
	$(nContent).click(fContent);
});
</script>
<script type="text/javascript">
$(function(){
	$("#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>');
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
[HTML] pobierz, plaintext 

Ten post edytował zegarek84 1.06.2011, 09:13:39

[Fifi209]

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 
$(this).children('div').css('display', 'block !important');
[JAVASCRIPT] pobierz, plaintext 

Nie do końca jak chciałem (miała być animiacja) ale trudno.