Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Usuwanie dynamicznie dodanych elementów
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Rafik
Witam.

Zrobiłem dynamiczne dodawanie pól w formularzu (dokładnie klonowanie jego części) lecz mam problem: nie można usunąć dynamicznie dodanych elementów. Jeśli elementy zostaną utworzone statycznie (z pętli) to usuwanie działa ok.

Kod JS:
[JAVASCRIPT] pobierz, plaintext
  1. jQuery(document).ready(function($){
  2. $('.btnAdd').click(function() {
  3. var num = $('.cloned').length;
  4. var newNum = new Number(num + 1);
  5.  
  6. var newElem = $('#duplicate' + num).clone().attr('id', 'duplicate' + newNum);
  7.  
  8. $('#duplicate' + num).after(newElem);
  9.  
  10. $('#duplicate' + newNum + ' select.fv_type').attr("id","fv_type"+newNum).val("1");
  11. $('#duplicate' + newNum + ' label.fv_type').attr("for","fv_type"+newNum);
  12. $('#duplicate' + newNum + ' input.fv_item').attr("id","fv_item"+newNum).val("");
  13. $('#duplicate' + newNum + ' label.fv_item').attr("for","fv_item"+newNum);
  14. $('#duplicate' + newNum + ' input.fv_price').attr("id","fv_price"+newNum).val("");
  15. $('#duplicate' + newNum + ' label.fv_price').attr("for","fv_price"+newNum);
  16. $('#duplicate' + newNum + ' .btnDel').attr("id",newNum);
  17.  
  18. $('.btnDel').css('display','inline');
  19.  
  20. if (newNum == 5)
  21. $('.btnAdd').css('display','none');
  22. });
  23.  
  24. $('.btnDel').click(function() {
  25. var num = $('.cloned').length;
  26. var del = $(this).attr("id");
  27.  
  28. $('#duplicate' + del).remove();
  29. $('.btnAdd').css('display','inline');
  30.  
  31. if (num-1 == 1)
  32. $('.btnDel').css('display','none');
  33. });
  34. });
[JAVASCRIPT] pobierz, plaintext


Kod HTML w połączeniu z OPT:
  1. {section=items_data}
  2. <div id="duplicate{$items_data.id}" class="cloned">
  3. <div class="formLabel"><label for="fv_type{$items_data.id}" class="fv_type">Typ usługi:<sup>*</sup></label></div>
  4. <div class="formField">
  5. <select id="fv_type{$items_data.id}" name="fv_type[]" class="fv_type">
  6. <option value="1"{if $items_data.type == '1'} selected="selected"{/if}>Hosting</option>
  7. <option value="2"{if $items_data.type == '2'} selected="selected"{/if}>Domena</option>
  8. <option value="3"{if $items_data.type == '3'} selected="selected"{/if}>Inna</option>
  9. </select>
  10. </div>
  11. <div class="clear_form"></div>
  12.  
  13. <div class="formLabel"><label for="fv_item{$items_data.id}" class="fv_item">Usługa:<sup>*</sup></label></div>
  14. <div class="formField"><input type="text" class="input fv_item" id="fv_item{$items_data.id}" name="fv_item[]" value="{$items_data.product}" /></div>
  15. <div class="clear_form"></div>
  16.  
  17. <div class="formLabel"><label for="fv_price{$items_data.id}" class="fv_price">Cena:<sup>*</sup></label></div>
  18. <div class="formField">
  19. <input type="text" class="input fv_price" id="fv_price{$items_data.id}" name="fv_price[]" style="width:200px;" value="{$items_data.price}" /><br />
  20. <a class="btnDel" id="{$items_data.id}"><img src='{$IMAGES}cross_circle.png' class='tip' title='Usuń usługę z faktury' alt='' /></a>
  21. </div>
  22. <div class="clear_form"><br /><br /></div>
  23. </div>
  24. {/section}
  25. <div class="formLabel">&nbsp;</div>
  26. <div class="formField"><a class="btnAdd"><img src='{$IMAGES}icons/add.png' class='tip' title='Dodaj usługę do faktury' alt='' /></a></div>
  27. <div class="clear_form"></div>


{$items_data.id} domyślnie przyjmuje wartość 1 i w pętli jest kolejno zwiększane.

Z góry dziękuję za pomoc.
Fifi209
jquery live ;]
Rafik
Do głowy mi nie przyszło aby użyć .live(). Dzięki wielkie! Mam jeszcze jeden problem związany z jQuery (tym razem z koszykiem). Może też dasz radę pomóc? smile.gif http://forum.php.pl/index.php?showtopic=153731
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.