Question

我尝试通过Google Apps脚本创建基于html的应用程序，该应用程序具有常量标题和导航，然后将拉出文件中的内容应用到页面的第三个动态部分。

一切顺利，直到我尝试插入我想要应用JQuery的输入字段。这对我来说是一个学习项目，但我完全迷失在这里。下面是转载剧本的相关部分。

我的问题是，我在表单上的某些框中使用了JQuery插件datepicker。现在，在index.html中，通过code.gs文件中的第一个doGet函数从index.html中取出，它完全正常，然后如果我点击加载newcust.html文件，之后将其插入（通过innerhtml）到动态元素，datepicker插件不再适用于新插入的内容（如标签＆＃39;开始日期＆＃39;下的内容）。日期输入框本身加载，newcust.html的其余部分也加载，但它现在只是一个标准文本框。

另外，这是我的第一个项目，如果我的编码风格不好，请原谅我。

code.gs

function doGet() {
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('GAS Application').setSandboxMode(HtmlService.SandboxMode.NATIVE);
return html;
}

的index.html

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>

<div id="top-banner">
<img src="bannertop.png" width="900" />
</div>

<div id="main-content">
<div id="navigation">
<div id="menu"><ul>
    <li><a href="#" id="Home" class="link1">Home</a></li>
    <li><a href="#" class="drop link2">Edit<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul style="height:72px;top:0px;">
            <li><a href="#" id="NewCust" class="link2a">New Customer/Quote</a></li>
            <li><a href="#" id="EditCust" class="link2b">Edit Customer</a></li>
            <li><a href="#" id="DeleteCust" class='link2c'>Delete Customer</a></li>
        </ul>
        </ul>
  </div>
 </div>

<div id="page-wrap">
<div id="dynamic" class="">
<h3 align="center">Home</h3>

<p>Home Page Text</p> 

<p>Please select a date below :</p>

click here : <input type="text" name="date" id="datepicker" />
  </div> 
 </div>
</div>

<script>
 $( "#datepicker" ).datepicker({
  showWeek: true,
  firstDay: 1,
 });
</script>

<script>
 $( document ).ready(function() {
 $( "#GoHome" ).add( "#NewCust" ).add( "#EditCust" ).add( "#DeleteCust").click(function() {
 var incoming = this.id;
 pushPageData(incoming);
}

function pushPageData(e) {
if (e == 'NewCust') {google.script.run.withSuccessHandler(updatePage).insertNewCust();}
else if (e == 'EditCust') {google.script.run.withSuccessHandler(updatePage).insertEditCust();}
else if (e == 'DeleteCust') {google.script.run.withSuccessHandler(updatePage).insertDeleteCust();}
 }  // these point to separate .gs files, I'll reproduce one below

function updatePage(data) {                   

var inframe = document.getElementById('dynamic');
inframe.innerHTML = data;
}

</script>

newcust.gs

function insertNewCust() {

var html = HtmlService.createHtmlOutputFromFile('newcust').getContent();
return html;
}

newcust.html

<h3>Add New Customer or Quote</h3>

<table class='first'><tr><td>
<form name='newcustomer' id='newcustomer'> 
<fieldset>
<legend>General Information </legend>

<div class='col15'>
 <label for='title'>Title:</label>
  <select class='dropdown' name='title'>
     <option value=''></option>
     <option>Mr</option>
     <option>Mrs</option>
     <option>Miss</option>
     <option>Ms</option>
     <option>Dr</option>
  </select>
 </div>
 <div class='col25'>
    <label for='firstname'>First Name:</label>
    <input name='firstname' type='text' style="default">
 </div>
 <div class='col25'>
    <label for='surname'>Surname:</label>
    <input name='surname' type='text' style="default">
 </div>
     <div style="clear: both; height: 5px;"></div>
  <div class='col50'>
    <label for='address'>Address:</label>
     <input name='address1' type='text' placeholder="House Name/No. & Street" style="wide" size="40">
      <input name='address2' type='text' placeholder="Estate" style="wide" size="40">
      <input name='addresstown' type='text' placeholder="Town/City" style="wide" size="25">
      <input name='addresspost' type='text' placeholder="Postcode" style="wide" size="10">
     </div>
     <div class='col20'>
     <label for='tel'>Telephone:</label>
     <input name='tel' type='text' size="15" class='tel'>
     </div>
  <div class='col25'>
  <label for='email'>Email:</label>
   <input name='email' type='text' size="25" placeholder='example@gmail.com'>
  </div>
  <div class='col15hide'>
     <label for='startdate'>Start Date:</label>
      <input type="text" name="startdate" id="datepicker" size="12" placeholder="dd/mm/yyyy" />
  </div>
  </fieldset>
  </form>
  </td></tr></table>

未包含CSS文件

Answer 1

好吧，花了大约2个小时基本上试图想象它是如何在内存中加载并意识到当jQuery $（＆＃39; #datepicker＆＃39;）位代码运行时，它必须创建一个所有现有的映射具有该ID的元素，并且由于我的第二页元素当时不存在，所以它们不在地图上，因此该功能不适用于它们。

所以它可能不太漂亮，但我刚刚将新的html插入页面后再次重复代码，因此似乎将新的输入元素映射到函数。同时采纳了这里的建议，并将我的所有脚本迁移出html文件。谢谢，你们当然把我推向了正确的方向。

<强>的index.html

function updatePage(data) {                   

  var inframe = document.getElementById('dynamic');
  inframe.innerHTML = data;


  $( ".datepicker" ).datepicker({
    showWeek: true,
    firstDay: 1,
   });
}

在innerHtml上丢失Javascript功能

1 个答案: