title: Async Calls in Typescript
body: <p>I am messing around with asynchronous calls. I want to generate a dashboard and initialise it with the id "1". It generates elements, which I can click on and generates another dashboard with elements. It is like a tree.</p>
  
  <p>So I can generate the dashboard with id 1 but I can't click on it. I know, that it is because of the async call in my code but I have no idea actually how to fix it. I was messing around with Deferred Objects but it didn't helped me. So this is the basis:</p>
  
  <pre><code>/// &lt;reference path="jquery.d.ts" /&gt;
  /// &lt;reference path="scripts/Dashboard.ts" /&gt;
  
  
  $(document).ready(function ()
  {
      init();
      jQuery('.Reference').click(function()
      {
          var classId = jQuery(this).attr('class');
          jQuery('#content').remove();
          generateDashboard(parseInt(classId), (d: Dashboard): void =&gt;
          {
              d.printDashboard();
          });
  
      });
  });
  
  function generateDashboard(param: number, callback: (d: Dashboard) =&gt; void): void
  {
      new Dashboard(param, callback);
  }
  
  
  function init()
  {
      generateDashboard(1, (d: Dashboard): void =&gt;
      {
          d.printDashboard();
      });
  
  }
  </code></pre>
  
  <p>Thanks in advance :)</p>
  
  <p>EDIT: Here the generated HTML. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Dashboard&lt;/title&gt;
  &lt;link type="text/css" href="app.css" rel="stylesheet"&gt;
  &lt;script src="jquery.js"&gt;
  &lt;script src="app.js"&gt;
  &lt;script src="scripts/Helper.js"&gt;
  &lt;script src="scripts/Dashboard.js"&gt;
  &lt;script src="scripts/Elements.js"&gt;
  &lt;script src="scripts/Leaf.js"&gt;
  &lt;script src="scripts/Status.js"&gt;
  &lt;script src="scripts/Threshold.js"&gt;
  &lt;script src="scripts/Item.js"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1 id="dashboard"&gt;&lt;/h1&gt;
  &lt;div id="content"&gt;
  &lt;div class="1"&gt;Element-1&lt;/div&gt;
  &lt;div class="31"&gt;Element-4&lt;/div&gt;
  &lt;div id="31" class="Reference"&gt;Element-2&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>