title: Attaching click event to a JQuery object not yet added to the DOM
body: <p>I've been having a lot of trouble attaching the click event to a JQuery object before adding it to the DOM.</p>
  
  <p>Basically I have this button that my function returns, then I append it to the DOM. What I want is to return the button with its own click handler. I don't want to select it from the DOM to attach the handler.</p>
  
  <p>My code is this:</p>
  
  <pre><code>createMyButton = function(data) {
  
    var button = $('&lt;div id="my-button"&gt;&lt;/div&gt;')
      .css({
         'display' : 'inline',
         'padding' : '0px 2px 2px 0px',
         'cursor' : 'pointer'
       }).append($('&lt;a&gt;').attr({
         //'href' : Share.serializeJson(data),
         'target' : '_blank',
         'rel' : 'nofollow'
       }).append($('&lt;image src="css/images/Facebook-icon.png"&gt;').css({
         "padding-top" : "0px",
         "margin-top" : "0px",
         "margin-bottom" : "0px"
       })));
  
       button.click(function () {
          console.log("asdfasdf");
       });
  
       return button;     
  }
  </code></pre>
  
  <p>The button that is return is unable to catch the click event. However, if I do this (after the button is added to the DOM):</p>
  
  <pre><code>$('#my-button').click(function () {
      console.log("yeahhhh!!! but this doesn't work for me :(");
  });
  </code></pre>
  
  <p>It works... but not for me, not what I want.</p>
  
  <p>It seems to be related to the fact that the object is not yet a part of the DOM.</p>
  
  <p>Oh! By the way, I'm working with OpenLayers, and the DOM object that I'm appending the button to is an OpenLayers.FramedCloud (Which is not yet a part of the DOM but will be once a couple of events are triggered.)</p>