title: How to render JS to a content generated with JS?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml">Executing &lt;script&gt; elements inserted with .innerHTML</a>  </p>
  </blockquote>
  
  
  
  <p>I have a problem, when generating content with Java Script, an embedded script does not function. How can one code this correctly?</p>
  
  <p>Here is a working example:
  class datepicker works correctly for a static html code, but does not work for those lines that are added on runtime with the add new line button. Plesae note, that reloading the page is not an option for me as the real problem is more complicated.</p>
  
  <p>Thanks for your help.</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
      &lt;script&gt;
      $(function() {
          $( ".datepicker" ).datepicker({
          yearRange: "-100:+0",
              changeMonth: true,
              changeYear: true,
              dateFormat: 'yy-mm-dd'
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;How many children do you have? What is their names and age?&lt;/p&gt;
   &lt;input type="text" id="qchildren" /&gt;
   &lt;div id="qchildren-answer-wrapper"&gt;&lt;/div&gt;
  
  
  &lt;button type="button" onclick="addNew()"&gt;Add new entry&lt;/button&gt;
  &lt;button type="button" onclick="save()"&gt;Save&lt;/button&gt;
  
   &lt;br/&gt;This is a correct date picker:
   &lt;input type="text" class="datepicker" id="dp1" /&gt;
  
  &lt;script&gt;
  var lines=0;
  function addNew()
  {
  lines++;
  var newElement = document.createElement("span");
    newElement.innerHTML =  'Name:&lt;input type="text" id="qchildrenname'+window.lines+'" /&gt; Birth date:&lt;input type="text" class="datepicker" id="qchildrenage'+window.lines+'" /&gt;&lt;br/&gt;';
  document.getElementById("qchildren-answer-wrapper").appendChild(newElement);
  }
  
  function save()
  {
  var answer='';
  for (var ii=1;ii&lt;=window.lines;ii++)
  {
  if (document.getElementById('qchildrenname'+ii.toString()).value.toString()!=''){
  answer+=document.getElementById('qchildrenname'+ii.toString()).value.toString()+','+document.getElementById('qchildrenage'+ii.toString()).value.toString()+';';
  }
  }
  document.getElementById("qchildren").value=answer;
  }
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>