jquery - Losing Javascript Functionality on innerHtml -

i'm trying create html-based application through google apps script has constant header , navigation , applies content pulled files third dynamic part of page.

it going well, until try insert input fields want jquery applied. learning project me, i'm lost here. below reproduced pertinent parts of script.

my question is, i'm using jquery plugin datepicker boxes on form. on page pulled index.html first doget function in code.gs file, works perfectly, if click load newcust.html file, after inserted (via innerhtml) dynamic element, datepicker plugin doesn't work more on newly inserted content (like 1 under label 'start date'). date input box loads, rest of newcust.html, standard text box.

also, first project, forgive me if coding style bad.

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 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 separate .gs files, i'll reproduce 1 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 file not included

well, spent 2 hours trying imagine how loads in memory , realised when jquery $( '#datepicker' ) bit of code runs, must create map of existing elements id, , since second page elements don't exist @ time, left off map, function isn't applied them.

so may not pretty, repeated code again after new html has been inserted page, seemingly mapping new input elements function. taken advice here , migrated of scripts out of html files. though, guys pushed me in right direction.

index.html

function updatepage(data) {                       var inframe = document.getelementbyid('dynamic');   inframe.innerhtml = data;     $( ".datepicker" ).datepicker({     showweek: true,     firstday: 1,    }); }