Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Funkcja działa tylko przy pierwszym użyciu
Forum PHP.pl > Forum > Po stronie przeglądarki
rudolf35
Witam,

stworzyłem w jquery dwa zdarzenia "click". Pierwsze dodaje zdjęcie do galerii i działa bez problemów. Natomiast drugie, usuwa wybrane zdjęcie. Funkcje działają prawidłowo. Jednak druga (usuwająca zdjęcie) działa tylko przy pierwszym użyciu. Za drugim razem przycisk, którego kliknięcie ona nasłuchuje działa jak standardowy odsyłacz, czyli wczytuje się strona. Męczę się z tym i nie mogę dojść dlaczego tak jest.

  1. $(document).ready(function() {
  2. $('a[class="addToGalleryButton"]').click(function(){
  3. var picture_id =$(this).attr('id')
  4. $.ajax(
  5. {
  6. url: 'http://jakasdomena.net/editor/gallery/add',
  7. type: "POST",
  8. data: ({article_id:<?php echo $this->articleid ?>, picture_id:picture_id }),
  9. success: function(html)
  10. {
  11. $('#imagesInGallery').empty();
  12. $('#imagesInGallery').append(html);
  13. }
  14. });
  15. return false;
  16. });
  17.  
  18. $('a[class="removeFromGalleryButton"]').click(function(){
  19. var picture_id =$(this).attr('id')
  20. $.ajax(
  21. {
  22. url: 'http://jakasdomena.net/editor/gallery/delete',
  23. type: "POST",
  24. data: ({article_id:<?php echo $this->articleid ?>, picture_id:picture_id }),
  25. success: function(html)
  26. {
  27. $('#imagesInGallery').empty();
  28. $('#imagesInGallery').append(html);
  29. }
  30. });
  31. return false;
  32. });
  33.  
  34. });


Z góry dzięki za pomoc.
vieri_pl
http://api.jquery.com/on/

Jeśli korzystasz z jQuery < 1.7 to live();
rudolf35
Korzystam z jQuery v1.7.2
vieri_pl
No to używaj takiego kodu:

Kod
$('a[class="removeFromGalleryButton"]').on('click', function(){


Operujesz na DOM'ie przy usuwaniu. Elementy pojawiają się i znikają, a więc działasz na dynamicznych rzeczach także musisz tą dynamikę wykryć za pomocą jQuery, z tym właśnie przychodzi funkcja on(); w jQuery 1.7, a we wcześniejszych była funkcja live()
zegarek84
@vieri_pl dobrze pisze ale za szybko i nawet nie sprawdził, że to nie zadziała ;]
luknąłem na dokumentację z ciekawości, że coś w jQuery się zmieniło... powyższy przykład zadziała jak stary .click... .live to było .delegate na "body"...
tutaj by uzyskać efekt .delegate po zdarzeniu podaje się selektory dzieci a dopiero potem funkcję
http://api.jquery.com/on/#direct-and-delegated-events - pierwsze 2 kody na jakie natrafisz i to co nad nimi pisze do ilu elementów zostanie podpięte zdarzenie...

problemem w kodzie autora jest:
$('#imagesInGallery').empty();
$('#imagesInGallery').append(html);
nowo utworzone elementy nie są już tymi samymi do których było podpięte zdarzenie - nie ma przykładu live ale wnioskuję, iż te linki do usuwania są w galerii...
kod napisany od ręki:
do podpięcia kliknięcia na usuwany element:
$("#imagesInGallery").on("click", "a.removeFromGalleryButton", function(){});
przy czym "a.removeFromGalleryButton" zamień na ".removeFromGalleryButton" o ile nie masz innych elementów niż linki w galerii o tej klasie czyli w zbiorze "#imagesInGallery .removeFromGalleryButton"
vieri_pl
Hmmm... troszkę nie rozumiem w takim razie on();

Mamy coś takiego:

http://jsfiddle.net/F8y7x/1/

Tu oczywiście dynamiczny nie wyświetli nam alerta.

Mamy coś takiego na on():

http://jsfiddle.net/F8y7x/3/

Też nie działa.

A tu live():

http://jsfiddle.net/F8y7x/4/ - i działa

Jak w takim razie zmienić przykład z live() na on() by działało?
zegarek84
ogólnie to w zasadzie nie programuję, ale jeśli chcesz by on działał tak jak .delegate to poprawnie powinno być tak:
http://jsfiddle.net/F8y7x/8/
prawie jak w Twoim drugim linku - element który wyszukujesz najlepiej powinien być kontenerem jak najniżej jak to możliwe, a podpinając zdarzenie podajesz jeszcze dynamiczne selektory... poczytaj jeszcze o .delegate w jQ - jak wrócę bo mi się jedzenie spali poszukam linka o live bez jQ to Ci tą technikę powinno rozjaśnić...

edit...
na tej stronie masz implementację zasady działania funkcji .mouseleave
http://www.quirksmode.org/js/events_mouse.html
jeśli to wszystko chcesz zrozumieć, to szukaj w google pod hasłami (js +) mouseleave, mouseenter, live events itd.
cała reszta jeśli chodzi o live to po prostu implementacja tych mechanizmów w bibliotekach

- już nieraz tutaj na forum podawałem rozwiązania bez .live - chyba zanim w jQ była funkcja .delegate, rozwiązania funkcjonalnie zbliżone do delegate w związku z czym szybsze od live... idea delegate polega na tym, by podpinać możliwie jak najniżej cały kontener gdzie obserwujemy albo dynamiczne elementy, albo gdzie tych elementów jest mnóstwo np. liczone w tysiącach - wtedy jeden nasłuch będzie lepszym rozwiązaniem od podpięcia tysięcy listenerów....
rudolf35
Dzięki zegarek84, teraz działa smile.gif
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.