title: How can I update/refresh Google MDL elements that I add to my page dynamically?
body: <p>I'm working with Google Material Design components which are stripped down for simplicity, then rendered more fully when the page is loaded. Simplified below to illustrate the issue:</p>
  
  <p><strong>What shows in the index.html file</strong>:</p>
  
  <p><code>&lt;div class="switch"&gt;&lt;/div&gt;</code></p>
  
  <p><strong>What renders to the DOM when the page is loaded</strong>:</p>
  
  <pre><code>&lt;div class="switch"&gt;
     &lt;div class="switch_track"&gt;&lt;/div&gt;
     &lt;div class="switch_thumb"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am creating a drag and drop HTML editor and have template files for each component type. The template file for a switch is simply:</p>
  
  <p><strong>switch.html</strong></p>
  
  <p><code>&lt;div class="switch"&gt;&lt;/div&gt;</code></p>
  
  <p>The problem is when I drag this to the canvas. jQuery looks at <code>switch.html</code> and renders <code>&lt;div class="switch"&gt;&lt;/div&gt;</code> to the DOM, but since it was dynamically added, it is not being "seen" by the scripts that added the additional track and thumb tags.</p>
  
  <p>How can I fix this issue so that whenever the DOM is updated, it reruns any scripts? Ideally I would like to avoid touching any of the Material Design script files.</p>