在innerHtml上丢失Javascript功能

Question

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

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

我的问题是，我使用窗体上的某些框的JQuery插件日期选择器。现在，在code.gs文件中的第一个doGet函数从index.html中拉出的页面上，它完全可以正常工作，然后如果在插入（通过innerhtml）到动态元素之后点击加载newcust.html文件，datepicker插件不再适用于新插入的内容（如标签“开始日期”下的那个）。日期输入框自身加载，与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, 
    }); 
}