[jQuery] Funkcja działa tylko przy pierwszym użyciu Opcje

[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.

[HTML] pobierz, plaintext 
      $(document).ready(function() {   
          $('a[class="addToGalleryButton"]').click(function(){
              var picture_id =$(this).attr('id')
              $.ajax(
              {
                 url: 'http://jakasdomena.net/editor/gallery/add',
                 type: "POST",
                 data: ({article_id:<?php echo $this->articleid ?>, picture_id:picture_id }),
                 success: function(html)
                 {
                    $('#imagesInGallery').empty();
                    $('#imagesInGallery').append(html);
                 }
              });
              return false;
          });
 
          $('a[class="removeFromGalleryButton"]').click(function(){
          var picture_id =$(this).attr('id')
          $.ajax(
          {
             url: 'http://jakasdomena.net/editor/gallery/delete',
             type: "POST",
             data: ({article_id:<?php echo $this->articleid ?>, picture_id:picture_id }),
             success: function(html)
             {
                $('#imagesInGallery').empty();
                $('#imagesInGallery').append(html);
             }
          });
            return false;
          });
 
      });
[HTML] pobierz, plaintext 

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"

Ten post edytował zegarek84 25.04.2012, 13:25:22

[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....

Ten post edytował zegarek84 25.04.2012, 14:32:00

[rudolf35]

Dzięki zegarek84, teraz działa