title: jQuery $(element) undefined whilst executing .click() method - returns element at all other times
body: <p>Have a really strange issue that a colleague was facing which I managed to work around, but for the life of me cannot understand why his initial code did not work! - we have a legacy asp.net web application that is using MasterPages/Content controls and has jQuery mixed all over the web application providing some client interactivity.</p>
  
  <p>Essentially there is a web form view that has a div containing a button which is initially hidden (display: none), upon clicking another menu item, this div is shown using jQuery BLOCKUI Plugin, blocking the rest of the UI and rendering the popup div into place - the user can then click the button, clicking the button should hide the containing div, and show another div that contains another two buttons - all should be simple.... but this is where it got funky:</p>
  
  <p>Bear in mind none of this content is dynamically generated, all HTML elements are present within the .aspx view up front after the page is finished loading.</p>
  
  <pre><code> var blockUiRenderFrame = function (html, width, height) {
          window.parent.$.blockUI({
              message: html,
              css: {
                  top: ($(window.parent).height() - height) / 2 + 'px',
                  left: ($(window.parent).width() - width) / 2 + 'px',
                  width: width
              }
          });
      };
  
  &lt;div id="anotherContentFrame"&gt;
      &lt;p&gt;some text&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="contentFrame" style="display:none;"&gt;
      &lt;div id="myButtonContainingDiv"&gt;
          &lt;button id="aButton" /&gt;
      &lt;/div&gt;
      &lt;div id="myOtherButtonsContainingDiv"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  $(document).ready(function() {
      $("#myButton").click(function() { 
          $("#myButtonContainingDiv").hide();
          $("#myOtherButtonsContainingDiv").show();
      });
  });
  
  &lt;!-- A Button on the page calls this code --&gt;
  blockUiRenderFrame($("#contentFrame"), 200, 200);
  </code></pre>
  
  <p>What I observed occurring was what appears to be a complete loss of context, or executing the event under a different context all together... during the handling of the click event, the div elements, or indeed anything within the HTML div contentFrame all return undefined.</p>
  
  <p>At <em>any other time</em> if I use the console/debugger, I can successfully return an element using say $("#myButtonContainingDiv").</p>
  
  <p>The click event has its correct event element, I can use $(this) to get the button I clicked on, but even trying to <strong>select $("#myButton") <em>within</em> the actual click event handler code itself</strong> returns 'undefined'.</p>
  
  <p>I <em>can</em> access $("anotherContentFrame") perfectly fine, at any time, including during the handling of the click event of #myButton.</p>
  
  <p>The <strong>workaround</strong> I had to use in order to get this code to work was:</p>
  
  <p>During the click event handler, use the following:</p>
  
  <pre><code>$(this).closest('div').hide()
  $(this).closest('div').next().show()
  </code></pre>
  
  <p>As this was the only way I could get any reference to the DOM elements on the page to successfully hide/show them.</p>
  
  <p>I can try to give out some more information if anyone wishes, I am not sure if anyone has ever seen an issue like this.</p>
  
  <p>Thanks in advance!</p>