title: JQuery textarea value is empty
body: <p>This type of question tends to immediately get a negative vote.  If you have the answer, please help!  Thanks.</p>
  
  <p>I have a script that adds a textarea to the dom.  When I enter data and later try to retrieve it the value returns empty.</p>
  
  <p>This successfully sets the value of the textarea:</p>
  
  <pre><code>$("textarea").each(function(){
      $(this).val("ASDFASDF");
  });
  </code></pre>
  
  <p>This successfully sets the css background property of the textarea:</p>
  
  <pre><code>$("textarea").each(function(){
      $(this).css({"border":"2px solid red"});
  });
  </code></pre>
  
  <p>But this does not return the value:</p>
  
  <pre><code>$("textarea").each(function(){
      alert($(this).val());
  });
  </code></pre>
  
  <p>I've tried .text(), .html(), .value - they all return nothing! It doesn't alert "undefined" or null but simply an empty value.</p>
  
  <p>I can't figure out why.</p>
  
  <p>Thanks in advance for the suggestions.  </p>
  
  <p><strong>MORE INFO</strong></p>
  
  <p>HTML is:</p>
  
  <pre><code>&lt;textarea id="Bio" rows="4"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>JQuery Library:
  <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</a></p>
  
  <p>Function is triggered by a button after the dom is loaded.</p>
  
  <p>A simplified version of the code is here:
  <a href="http://social-gamer.com/textarea.html" rel="nofollow">http://social-gamer.com/textarea.html</a></p>