title: jQuery nested functions
body: <p>I am still new to JavaScript and jQuery, so I am confused as to why the following code is not working as I anticipated.  All I am trying to do is save input on a button click (<code>id=recordInput</code>) and display it with another button click (<code>id=displayInput</code>).  What I observe is that <code>tempInput</code> is stored, (the code works until that point) but assignment of displayInputs onclick attribute is not executed.  My question is, can you not nest a <code>$().click()</code> call inside of another <code>&amp;().click()</code> call?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
  $(document).ready(function () {
  
      $('#recordInput').click(function(event) {
          var tempInput = $('#testInput').val();
          &amp;('#displayInput').click(function(event) {
              console.log(tempInput);
          });
      });
  });
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My thinking is this in pseudocode:</p>
  
  <ol>
  <li>assign recordInput onclick attribute to the following function:</li>
  <li>store tempInput</li>
  <li>set displayInput onclick to alert the tempInput value</li>
  </ol>
  
  <p>what is wrong with my thinking?</p>
  
  <p>NOTE: I did not include any html tags but all of the ids are referenced correctly</p>