title: Confusion Over jQuery Events?
body: <p>I have just started to use jQuery and have run into a problem regarding events.</p>
  <p>Below is my code, it creates a div element on the page, I would like to attach an event handler to this div that reacts if it is clicked or double clicked. I thought the following code would work but it doesn't seem to work at all:</p>
  <pre><code>this.mainAppDiv = document.createElement(&quot;div&quot;);
  this.mainAppDiv.id = &quot;mainBody&quot;;
  this.mainAppDiv.style.width = &quot;99%&quot;;
  this.mainAppDiv.style.height = this.mainCanvasDiv_H;
  this.mainAppDiv.style.border = &quot;thin red dashed&quot;;
  
  document.body.appendChild(this.mainAppDiv);
  
  $(this.mainAppDiv).click(function()
  {
      alert(&quot;The Clicked Divs ID: &quot; + this.mainAppDiv.id);
  });
  </code></pre>
  <p>When the event is fired is should simply alert what DIV element was clicked but I get the following error in firebug:</p>
  <blockquote>
  <p>this.mainAppDiv is undefined<br />
  line 43 - <strong>alert(&quot;The Clicked Divs ID: &quot; + this.mainAppDiv.id);</strong></p>
  </blockquote>
  <p>Can anyone see why this would not work?</p>