在 innerHtml 上失​​去 Javascript 功能

Question

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

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

我的问题是，我正在为表单上的某些框使用 JQuery 插件 datepicker。现在在 code.gs 文件中的第一个 doGet 函数从 index.html 中提取的页面上，一切正常，然后如果我单击加载 newcust.html 文件，在它被插入（通过 innerhtml）到动态元素之后，日期选择器插件不再适用于新插入的内容（如标签“开始日期”下的内容）。日期输入框本身会加载，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 $( '#datepicker' ) 代码运行时，它必须创建具有该 id 的所有现有元素的映射，并且由于当时我的第二个页面元素不存在，因此它们被排除在地图之外，因此该功能不适用于它们。

所以它可能不漂亮，但我只是在我的新 html 插入页面后再次重复代码，因此似乎将新输入元素映射到函数。还接受了这里的建议，并将我的所有脚本从 html 文件中迁移出来。不过谢谢，你们确实把我推向了正确的方向。

index.html

function updatePage(data) {                   

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


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