Запуск (инициализация скрипта) после добавления на загруженную страницу
Здравствуйте! Есть форма в которую с помощью 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'. Помогите пожалуйста разобраться. |
mishanay,
А что это за элемент document.getElementById("tbody") строка 5 в скрипте? |
Цитата:
<table> <thead> <tr> <th>заголовок</th> <th>заголовок</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table> |
mishanay,
А где ld tbody? И с остальными ld в js-коде та же ситуация? |
Часовой пояс GMT +3, время: 14:33. |