[JQuery] Akcja dla dynamicznie tworzonego potomka Opcje

[gregiolo]

Witam serdecznie,
Posiadam następujący, przykładowy kod:

[HTML] pobierz, plaintext 
<div id="container">
 <div id="rodzic"></div>
</div>
[HTML] pobierz, plaintext 

oraz zdarzenie (wstępnie):

[HTML] pobierz, plaintext 
$("#rodzic").click(function() {
  $(this).append('<div id="losoweid"></div>');
});
[HTML] pobierz, plaintext 

Chciałbym aby po kliknięciu na blok #rodzic lub każdy #losoweid i wszystkich zagnieżdżonych w nich lub równoległych poziomem do nich, wykonywała się taka sama akcja jak wyżej czyli tworzenie potomnego bloku. Poziom, w którym byłby dopisany zależałby od klikniętego bloku.

Problem w tym, że gdy nawet zmienię selektor na $("#container > div") gdy klikam na "rodzic" lub "losoweid" wykonuje się automatycznie ta sama akcja dla rodzica. Jednocześnie nie mogę pozbawić rodzica eventu gdyż może się przydać po kliknięciu na niego.

Próbowałem metod:
1) umieszczenia nazwanego eventu click po append() ale nie odczytuje akcji
2) korzystania z funkcji delegate
3) korzystania z funkcji live()
4) korzystania z regexp w selektorze dla wszystkich div, ale wtedy akcja wywołuje się rekurencyjnie do bólu.
5) unbind

Naturalnie nie wchodzi w grę dopisywanie ręczne definicji akcji dla każdego ID.
Fakt, że mogłem rozwiązań j/w użyć nieumiejętnie, więc proszę o pomoc.

[everth]

Jeśli dobrze kojarzę

[JAVASCRIPT] pobierz, plaintext 
$('#rodzic').click(function(e) {
     curObj = $(e.currentTarget);
     curObj.append('<div id="losoweid"></div>');
});
[JAVASCRIPT] pobierz, plaintext 

Dodaj jeszcze warunkowe wykonanie zdarzenia w zależności od rodzaju klikniętego curObj.

[gregiolo]

Hmm pomysł ciekawy, ale niestety nie działa.

Jako selektora użyłem zarówno rodzic jak i wszystkie div'y dzieci.

[HTML] pobierz, plaintext 
obj = $(e.currentTarget);
objId = "#"+$(obj).attr('id');
[HTML] pobierz, plaintext 

W każdej sytuacji objId zawsze ma wartość "#rodzic". obj jest typu object. [Object] object :/

[kicaj]

Kod

$("#rodzic").live('click', function() {
  $(this).append('<div id="losoweid"></div>');
});

[zegarek84]

Hmm pomysł ciekawy, ale niestety nie działa.

prawie to rozwiązanie które podał @everth tylko przede wszystkim nie currentTarget a .target

[everth]

@zegarek84
Dzięki

Doszedłem jednak do wniosku że @kicaj ma rację, lepiej użyć tu live w połączeniu z dodatkową klasą

[JAVASCRIPT] pobierz, plaintext 
$('#rodzic, .appendable').live('click', function(e) {
$(this).append('<div id="losoweid" class="appendable"></div>');
});
[JAVASCRIPT] pobierz, plaintext 

[gregiolo]

Dzieki za pomoc. Spróbowałem sprawdzić wszystkie opcje, ale za każdym razem wywoływany jest zarówno rodzic jak i potomek. Nie potrafię tego zniwelować. Użyłem standardowego JavaScript z onclick i wszystkie problemy się rozwiązały.

[zegarek84]

@everth - mylisz się z 2 powodów, pierwszy mało znaczący to wydajność - live tutaj będzie wolniejszy od poprzedniego rozwiązania, drugi, to jeśli będziesz miał div w div'ie to do każdego dopasowanego elementu doda (wykona append) - a nie o to chodziło... live działa na zasadzie, że bind jest podpięty do body lub do html'a i potem elementy w górę drzewa DOM od .target są porównywane z elementami dopasowanymi do "selektorów"....
.lieve - Event Delegation

czyli to działa na podobnej zasadzie co przykład z bind'em, pobraniem target'a i przeszukaniem w górę przez closest
http://api.jquery.com/closest/#example-0

Dzieki za pomoc. Spróbowałem sprawdzić wszystkie opcje, ale za każdym razem wywoływany jest zarówno rodzic jak i potomek. Nie potrafię tego zniwelować. Użyłem standardowego JavaScript z onclick i wszystkie problemy się rozwiązały.

nie wypróbowałeś wszystkich opcji ;]

[everth]

To dziwne bo sprawdziłem u siebie na prostym przykładzie i działa. Tak, masz rację - live działa w sposób jaki opisujesz, tylko metoda closest zwraca najbliższy pasujący selektor w kontekście e.target - w tym wypadku kliknięty element appendable i stosuje do niego funkcję. To nie jest propagowane w górę.