Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Запуск (инициализация скрипта) после добавления на загруженную страницу (https://javascript.ru/forum/dom-window/62237-zapusk-inicializaciya-skripta-posle-dobavleniya-na-zagruzhennuyu-stranicu.html)

mishanay 31.03.2016 21:15

Запуск (инициализация скрипта) после добавления на загруженную страницу
 
Здравствуйте! Есть форма в которую с помощью JS добавляются поля по желанию (клику). Поля эти имеют некий input к которому привязывается jQuery.datetimepicker.
То есть выглядет это примерно так:
// ### Добавление допполей
var items=1;
function AddItem() {
  table=document.getElementById("manuf");
  button=document.getElementById("tbody");
  buttontable=document.getElementById("table")[0];
  items++;
newitem="<td><input name='name_manuf[]' class='form-control' type='text' value=''></td>";
  newitem+="<td><input name='col_manuf[]' class='form-control' type='text' value='' ></td>";
  newitem+="<td><input name='price_zakup_manuf[]' id='price_zakup_manuf"+items+"' class='form-control' type='text' value='' ></td>";
  newitem+="<td><input name='procent_manuf[]' id='procent_manuf"+items+"' class='form-control' type='text' value='' ></td>";
  newitem+="<td><input name='price_prod_manuf[]' id='price_prod_manuf"+items+"' class='form-control' type='text' value='' ></td>";
  newitem+="<td><input name='nacenka_manuf[]' id='nacenka_manuf"+items+"' class='form-control' type='text' value='' ></td>";
  newitem+="<td><input name='date_manuf[]' id='DateTeme"+items+"' class='form-control' type='text' value='' ></td>";
  newitemJs="jQuery.datetimepicker.setLocale('ru'); jQuery('#DateTeme"+items+"').datetimepicker({timepicker:false, format:'Y.m.d', changeMonth: true, inline:false, onChangeDateTime:function(dp,$input){ var $text123 = $('#DateTeme"+items+"').val(); $('#DateTeme"+items+"').val($input.val())}});";
  newnode=document.createElement("tr");
  newnodeJs=document.createElement("script");
  newnodeJs.innerHTML=newitemJs;
  newnode.innerHTML=newitem;
  newnodeall=newnode+=newnodeJs;
  table.appendChild(newnodeall,button);
  //table.insertBefore(newnodeJs,button);

// ### Проценты и наценка для допполей
get=document.querySelector.bind(document)
zakup=get("#price_zakup_manuf"+items)
percent=get("#procent_manuf"+items)
result=get("#nacenka_manuf"+items)
itogo=get("#price_prod_manuf"+items)
percent.oninput=function(){
	result.value=percent.value*(zakup.value/100); // Наценка
	itogo.value=(parseInt (result.value, 10)+parseInt (zakup.value, 10)); // Продажная цена
	};
itogo.oninput=function(){
	result.value=(parseInt (itogo.value, 10)-parseInt (zakup.value, 10)); // Продажная цена вручную
	}
}


HTML который должен в идеале получиться:
<tbody id="manuf">
	<tr>
		<td>
		<input name="inputHand" type="hidden" value="1">
			<input name="name_manuf[]" class="form-control inputHand" type="text" value="">
		</td>
		<td>
			<input name="col_manuf[]" class="form-control inputHand" type="text" value="">
		</td>
		<td>
			<input name="price_zakup_manuf[]" id="price_zakup_manuf" class="form-control inputHand" type="text" value="">
		</td>
		<td>
			<input name="procent_manuf[]" id="procent_manuf" class="form-control inputHand" type="text" value="">
		</td>
		<td>
			<input name="price_prod_manuf[]" id="price_prod_manuf" class="form-control inputHand" type="text" value="">
		</td>
		<td>
			<input name="nacenka_manuf[]" id="nacenka_manuf" class="form-control inputHand" type="text" value="">
		</td>
		<td>
			<input name="date_manuf[]" id="DateTeme" class="form-control inputHand" type="text" value="">
<script type="text/javascript">
//### Дата
jQuery.datetimepicker.setLocale('ru'); // Дата
jQuery('#DateTeme').datetimepicker({
  timepicker:false,
  format:'Y.m.d',
  changeMonth: true,
  inline:false,
  onChangeDateTime:function(dp,$input){
	  var $text123 = $('#DateTeme').val();
	  $("#DateTeme").val($input.val())
  }
});
</script>
		</td>
	</tr>
	<tr>
		<td>
			<input name="name_manuf[]" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="col_manuf[]" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="price_zakup_manuf[]" id="price_zakup_manuf2" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="procent_manuf[]" id="procent_manuf2" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="price_prod_manuf[]" id="price_prod_manuf2" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="nacenka_manuf[]" id="nacenka_manuf2" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="date_manuf[]" id="DateTeme2" class="form-control" type="text" value="">
<script type="text/javascript">
			//### Дата
jQuery.datetimepicker.setLocale('ru'); // Дата
jQuery('#DateTeme2').datetimepicker({
  timepicker:false,
  format:'Y.m.d',
  changeMonth: true,
  inline:false,
  onChangeDateTime:function(dp,$input){
	  var $text123 = $('#DateTeme2').val();
	  $("#DateTeme2").val($input.val())
  }
});
</script>
		</td>
	</tr>
	<tr>
		<td>
			<input name="name_manuf[]" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="col_manuf[]" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="price_zakup_manuf[]" id="price_zakup_manuf3" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="procent_manuf[]" id="procent_manuf3" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="price_prod_manuf[]" id="price_prod_manuf3" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="nacenka_manuf[]" id="nacenka_manuf3" class="form-control" type="text" value="">
		</td>
		<td>
			<input name="date_manuf[]" id="DateTeme3" class="form-control" type="text" value="">
<script type="text/javascript">
			//### Дата
jQuery.datetimepicker.setLocale('ru'); // Дата
jQuery('#DateTeme3').datetimepicker({
  timepicker:false,
  format:'Y.m.d',
  changeMonth: true,
  inline:false,
  onChangeDateTime:function(dp,$input){
	  var $text123 = $('#DateTeme3').val();
	  $("#DateTeme3").val($input.val())
  }
});
</script>
		</td>
	</tr>
</tbody>


Но, в итоге получаю ошибку: main-page.js:180 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Помогите пожалуйста разобраться.

Dilettante_Pro 01.04.2016 10:16

mishanay,
А что это за элемент document.getElementById("tbody")

строка 5 в скрипте?

mishanay 02.04.2016 06:30

Цитата:

Сообщение от Dilettante_Pro (Сообщение 412655)
mishanay,
А что это за элемент document.getElementById("tbody")

строка 5 в скрипте?

Элемент таблицы
<table>
	<thead>
		<tr>
		<th>заголовок</th>
		<th>заголовок</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		<td></td>
		<td></td>
		</tr>
	</tbody>
</table>

Dilettante_Pro 02.04.2016 07:27

mishanay,
А где ld tbody? И с остальными ld в js-коде та же ситуация?


Часовой пояс GMT +3, время: 14:33.