Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JQuery] Akcja dla dynamicznie tworzonego potomka
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
gregiolo
Witam serdecznie,
Posiadam następujący, przykładowy kod:

  1. <div id="container">
  2. <div id="rodzic"></div>
  3. </div>


oraz zdarzenie (wstępnie):

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


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
  1. $('#rodzic').click(function(e) {
  2. curObj = $(e.currentTarget);
  3. curObj.append('<div id="losoweid"></div>');
  4. });
[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.
  1. obj = $(e.currentTarget);
  2. objId = "#"+$(obj).attr('id');


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
Cytat(gregiolo @ 4.06.2011, 16:27:39 ) *
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
  1. $('#rodzic, .appendable').live('click', function(e) {
  2. $(this).append('<div id="losoweid" class="appendable"></div>');
  3. });
[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

Cytat(gregiolo @ 4.06.2011, 18:22:25 ) *
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ę.
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.