Element ID can't be found after beind appended to DIV
<p>I'm using this bit of jQuery to append a text input field to a div after a checkbox is checked:</p>

<pre><code>$('.sharewithfriends').on("click", ".manual-invite", function () {
        if ($('input[name=manual-invite]').is(':checked')) {
          $('&lt;li style="margin-top:0;display:none"&gt;&lt;input type="text" id="invite_email1" name="invite-email1" value="Add an E-Mail" onfocus="clearText(invite_email1);" onblur="fillText(invite_email1);"/&gt;&lt;span&gt;&lt;a class="add" href=""&gt;Add&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;').appendTo('#invite-emails').slideToggle();

}
</code></pre>

<p>All of that works fine, except for the <code>onfocus</code> and <code>onblur</code> events. They call the following simple functions, which are supposed to clear the field on focus and fill it with the default text on blur:</p>

<pre><code>function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}

function fillText(thefield){
if (thefield.value=="")
thefield.value=thefield.defaultValue;
}
</code></pre>

<p>But when I click the field, I get an error saying "invite_email1 is not defined" even though it clearly is.</p>

<p>Anyone know what I need to do to get this to work?</p>
