JQuery textarea value is empty
<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>
