在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, 
    }); 
}