Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [JavaScript]Problem z funkcją - Uncaught TypeError is not a function

Napisany przez: matti9410 24.03.2020, 17:21:20

Witam napisałem dwie funkcje do dodawania oraz usuwania div-a z kodu.

Kod
    function add_item(id) {
        var cnt_str = $("#edit_items_" + id + " button:last").val();
        
        if(typeof cnt_str === 'undefined'){
            var cnt_str = "0";
        }
        
        var cnt = parseInt(cnt_str, 10);
        ++cnt;
        
        var mySecondDiv = '<div class="form-row" id="item_' + id + "_" + cnt + '">';
        mySecondDiv = mySecondDiv +    '<div class="form-group col-md-7" id="item_select_' + cnt + '">';
        mySecondDiv = mySecondDiv +    '</div>';
        mySecondDiv = mySecondDiv +    '<div class="form-group col-md-4">';
        mySecondDiv = mySecondDiv +    '<input type="number" class="form-control" name="items_quantity[]" placeholder="Ilość" required>';
        mySecondDiv = mySecondDiv +    '</div>';
        mySecondDiv = mySecondDiv +    '<div class="form-group col-md-1">';
        mySecondDiv = mySecondDiv +    '<button type="button" class="btn btn-danger" onclick="delete_item(' + id + ', ' + cnt + ')" value="' + cnt + '" id="delete_item">Usuń</button>';
        mySecondDiv = mySecondDiv +    '</div>';
        mySecondDiv = mySecondDiv +    '</div>';
        $("#edit_items_" + id).append(mySecondDiv);
        $("#items_select").clone().appendTo("#item_select_" + cnt);
    };
    
    function delete_item(id, item) {
        $("#item_" + id + "_" + item).remove();
    };


Za pomocą Smarty generuje modal-e

[HTML] pobierz, plaintext 
  1. {foreach from=$data_services_table key=id item=n}
  2. 	<!-- The Modal -->
  3. 	<http://december.com/html/4/element/div.html class="modal fade" id="modal_edit_service_{$n.id}">
  4. 		<http://december.com/html/4/element/div.html class="modal-dialog modal-xl">
  5. 			<http://december.com/html/4/element/div.html class="modal-content">
  6.  
  7. 				<http://december.com/html/4/element/form.html enctype="multipart/form-data" action="../offers/" method="POST">
  8. 					<!-- Modal Header -->
  9. 					<http://december.com/html/4/element/div.html class="modal-header">
  10. 						<http://december.com/html/4/element/h3.html class="modal-title">Dane usługi</http://december.com/html/4/element/h3.html>
  11. 						<http://december.com/html/4/element/button.html type="button" class="close" data-dismiss="modal">×</http://december.com/html/4/element/button.html>
  12. 					</http://december.com/html/4/element/div.html>
  13.  
  14. 					<!-- Modal body -->
  15. 					<http://december.com/html/4/element/div.html class="modal-body">
  16. 						<http://december.com/html/4/element/div.html class="form-row">
  17. 							<http://december.com/html/4/element/div.html class="form-group col-md-4">
  18. 								<http://december.com/html/4/element/label.html for="name_items">Nazwa</http://december.com/html/4/element/label.html>
  19. 								<http://december.com/html/4/element/input.html type="text" size="64" class="form-control" name="name" placeholder="Nazwa" value="{$n.name}" required>
  20. 								<http://december.com/html/4/element/input.html type="hidden" class="form-control" name="id" value="{$n.id}" required>
  21. 							</http://december.com/html/4/element/div.html>
  22. 							<http://december.com/html/4/element/div.html class="form-group col-md-4">
  23. 								<http://december.com/html/4/element/label.html for="name_items">Rok oferty</http://december.com/html/4/element/label.html>
  24. 								<http://december.com/html/4/element/input.html type="number" step="1" class="form-control" name="year_service" placeholder="Rok" value="{$n.year_service}" required>
  25. 							</http://december.com/html/4/element/div.html>
  26. 						</http://december.com/html/4/element/div.html>
  27. 						<http://december.com/html/4/element/div.html class="form-row">
  28. 							<http://december.com/html/4/element/div.html class="form-group col-md-12">
  29. 								<http://december.com/html/4/element/label.html for="price_items">Cena (PLN)</http://december.com/html/4/element/label.html>
  30. 								<http://december.com/html/4/element/div.html class="form-row">
  31. 									<http://december.com/html/4/element/div.html class="form-group col-md-5">
  32. 										<http://december.com/html/4/element/select.html class="form-control" name="price_option">
  33. 											<http://december.com/html/4/element/option.html value="0">Cena (PLN) obliczona z przedmiotów</http://december.com/html/4/element/option.html>
  34. 											<http://december.com/html/4/element/option.html value="1" selected>Cena (PLN) zadana</http://december.com/html/4/element/option.html>
  35. 										</http://december.com/html/4/element/select.html>
  36. 									</http://december.com/html/4/element/div.html>
  37. 									<http://december.com/html/4/element/div.html class="form-group col-md-7">
  38. 										<http://december.com/html/4/element/input.html type="number" step="0.01" class="form-control" name="price" placeholder="Cena (PLN)" value="{$n.price}">
  39. 									</http://december.com/html/4/element/div.html>
  40. 								</http://december.com/html/4/element/div.html>
  41. 							</http://december.com/html/4/element/div.html>
  42. 						</http://december.com/html/4/element/div.html>
  43. 						<http://december.com/html/4/element/div.html class="form-row">
  44. 							<http://december.com/html/4/element/div.html class="form-group col-md-12">
  45. 								<http://december.com/html/4/element/label.html for="nip">Opis</http://december.com/html/4/element/label.html>
  46. 								<http://december.com/html/4/element/input.html type="text" size="255" class="form-control" name="description" placeholder="Krótki opis" value="{$n.description}"required>
  47. 							</http://december.com/html/4/element/div.html>
  48. 						</http://december.com/html/4/element/div.html>
  49. 						<http://december.com/html/4/element/div.html class="form-row">
  50. 							<http://december.com/html/4/element/div.html class="form-group col-md-12">
  51. 								<http://december.com/html/4/element/label.html for="items">Przedmioty</http://december.com/html/4/element/label.html>
  52. 								<http://december.com/html/4/element/div.html id="edit_items_{$n.id}">
  53. 									{foreach from=$n.items_quantity key=id item=x name=items}
  54. 										<http://december.com/html/4/element/div.html class="form-row" id="item_{$n.id}_{$smarty.foreach.items.index}">
  55. 											<http://december.com/html/4/element/div.html class="form-group col-md-7">
  56. 												<http://december.com/html/4/element/select.html class="form-control" name="items_id[]" id="items_select">
  57. 													{foreach from=$data_items_table key=id item=i}
  58. 														{if $i.id eq $x.id}
  59. 															<http://december.com/html/4/element/option.html value="{$i.id}" selected>{$i.name} - {$i.price} </http://december.com/html/4/element/option.html>
  60. 														{else}
  61. 															<http://december.com/html/4/element/option.html value="{$i.id}">{$i.name} - {$i.price} PLN</http://december.com/html/4/element/option.html>
  62. 														{/if}
  63. 													{/foreach}
  64. 												</http://december.com/html/4/element/select.html>
  65. 											</http://december.com/html/4/element/div.html>
  66. 											<http://december.com/html/4/element/div.html class="form-group col-md-4">
  67. 											{foreach from=$data_items_table key=id item=i}
  68. 												{if $x.id eq $i.id}
  69. 													<http://december.com/html/4/element/input.html type="number" class="form-control" name="items_quantity[]" placeholder="Ilość" value="{$x.quantity}" required>
  70. 												{/if}
  71. 											{/foreach}
  72. 											</http://december.com/html/4/element/div.html>
  73. 											<http://december.com/html/4/element/div.html class="form-group col-md-1">
  74. 												{if $smarty.foreach.items.index > 0}
  75. 													<http://december.com/html/4/element/button.html type="button" class="btn btn-danger" onclick="delete_item({$n.id}, {$smarty.foreach.items.index})">Usuń</http://december.com/html/4/element/button.html>
  76. 												{/if}
  77. 											</http://december.com/html/4/element/div.html>
  78. 										</http://december.com/html/4/element/div.html>
  79. 									{/foreach}
  80. 								</http://december.com/html/4/element/div.html>
  81. 							</http://december.com/html/4/element/div.html>
  82. 						</http://december.com/html/4/element/div.html>
  83. 						<http://december.com/html/4/element/div.html class="form-row">
  84. 							<http://december.com/html/4/element/div.html class="form-group col-md-12">
  85. 								<http://december.com/html/4/element/div.html class="text-right">
  86. 									<http://december.com/html/4/element/div.html class="form-row">
  87. 										<http://december.com/html/4/element/div.html class="form-group col-md-12">
  88. 											<http://december.com/html/4/element/button.html type="button" class="btn btn-primary" onclick="add_item({$n.id})">Dodaj nowy przedmiot</http://december.com/html/4/element/button.html>
  89. 										</http://december.com/html/4/element/div.html>
  90. 									</http://december.com/html/4/element/div.html>
  91. 								</http://december.com/html/4/element/div.html>
  92. 							</http://december.com/html/4/element/div.html>
  93. 						</http://december.com/html/4/element/div.html>
  94. 					</http://december.com/html/4/element/div.html>
  95.  
  96. 					<!-- Modal footer -->
  97. 					<http://december.com/html/4/element/div.html class="modal-footer">
  98. 						<http://december.com/html/4/element/button.html type="submit" class="btn btn-primary" name="submit_save_service_information">Zapisz</http://december.com/html/4/element/button.html>
  99. 						<http://december.com/html/4/element/button.html type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</http://december.com/html/4/element/button.html>
  100. 					</http://december.com/html/4/element/div.html>
  101. 				</http://december.com/html/4/element/form.html>
  102. 			</http://december.com/html/4/element/div.html>
  103. 		</http://december.com/html/4/element/div.html>
  104. 	</http://december.com/html/4/element/div.html>
  105. {/foreach}
[HTML] pobierz, plaintext


Gdy otwieram modal i posiadam wygenerowane przyciski "Usuń" wszystko działa poprawnie. Problem pojawia się gdy usune wszystkie div-y mające przycisk "Usuń" a następnie przyciskiem "Dodaj nowy przedmiot" dodam div-y i przyciskiem "Usuń" próbuję je usunąć, wtedy pojawia się w przeglądarce błąd.

Cytat
Uncaught TypeError: delete_item is not a function
at HTMLButtonElement.onclick ((index):1)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)