Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] jQuery - zdarzenia na nowo dodanych elementach
Forum PHP.pl > Forum > Przedszkole
mbak
Witam mam problem z jQuery... otóż chcę żeby w trakcie uzupełniania formularza dodawały się do niego nowe pola:
mam trzy pola tekstowe -> po kliknięciu w pierwsze z nich (z klasą dodaj-pole) zostaje wstawiona kolejna linijka z trzema następnymi polami -> w następnej linijce to samo, po kliknięciu dodaje się nowa linijka itd. do momentu aż wprowadzę tyle danych ile potrzebuje. Niby działa, ale nowa linijka wstawia się tylko po kliknięciu na pierwsze pole pierwszej linijki.
Przy kliknięciu w drugiej (nowo dodanej) linijce nic się nie dzieje - tak jakby jQuery wogóle nie odczytywało kliknięcia w to pole.
Dodam że skrypt czyta kliknięcie w pole input o klasie dodaj-pole. Oto mój kod:

  1. <div class="oc">
  2. <div class="oc1">
  3. 1.
  4. </div>
  5. <div class="oc1">
  6. <input placeholder=" Wpisz ocenę" class="dodaj-pole" name="nazwa1" value="" id="nazwa1" type="text">
  7. <p class="ukryty">2</p>
  8. </div>
  9. <div class="oc1">
  10. <input placeholder=" Wpisz ocenę słownie" name="nazwa_slownie1" value="" id="nazwa_slownie1" type="text">
  11. </div>
  12. <div class="oc1">
  13. <input placeholder=" Wpisz ocenę liczbowo" name="ocena_liczbowo1" value="" id="ocena_liczbowo1" type="text">
  14. </div>
  15. </div>
  16. <br class="koniec-form">


  1. function dodaj (event) {
  2.  
  3. var id = $(this).attr('id');
  4.  
  5. var numer = $('#'+id+' + p').text();
  6.  
  7. console.log(id);
  8.  
  9. console.log(numer);
  10.  
  11. if(numer!='') {
  12.  
  13. nastepny = parseInt(numer) + 1;
  14.  
  15. //tutaj wstawienie kolejnej linijki formularza:
  16.  
  17. $('br.koniec-form').before('<div class="oc"><div class="oc1">'+numer+'.</div><div class="oc1"><input placeholder=" Wpisz ocenę" class="dodaj-pole" name="nazwa'+numer+'" value="" id="nazwa'+numer+'" type="text"> <p class="ukryty">'+nastepny+'</p> </div><div class="oc1"><input placeholder=" Wpisz ocenę słownie" class="dodaj-pole" name="nazwa_slownie'+numer+'" value="" id="nazwa_slownie'+numer+'" type="text"></div><div class="oc1"><input placeholder=" Wpisz ocenę" class="dodaj-pole" name="ocena_liczbowo'+numer+'" value="" id="ocena_liczbowo'+numer+'" type="text"></div></div>');
  18.  
  19. $('#'+id+' + p').text('');
  20. }
  21.  
  22. }
  23.  
  24. $("input.dodaj-pole").on("mousedown", dodaj);


Czy ktoś poratuje mnie? smile.gif




EDIT:
Chyba rozwiązałem problem:
Zmieniłem odczytanie zdarzenia w jQ na takie:
  1. $(document).on("keypress", ".dodaj-pole", dodaj);


Póki co działa bez problemu smile.gif
viking
W chwili gdy inicujesz jquery nie ma jeszcze elementów więc nowo powstałe nie mają zdarzeń. Przypinać nasłuch do document nie ma żadnego sensu, znajdź wspólnego rodzica. Tu masz więcej o temacie: http://wwwgo.pl/article/15/jquery%2C_zdarz...e_metoda_%24.on
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.