jQuery val() failing on dynamically generated input
<p>I have the following dynamically created HTML block:</p>

<pre><code>&lt;form class="standard settingsPage" method="post" enctype="multipart/form-data" name="account" style="background-color: rgb(61, 80, 133);"&gt;
&lt;h2&gt;Add New Account&lt;/h2&gt;
&lt;p&gt;
&lt;label class="" disabled="true"&gt;E-mail address:&lt;/label&gt;
&lt;input id="accountEmailAddress" class="" type="text" value="" name="accountEmailAddress"/&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label class="" for="accountEmailPassword"&gt;Password:&lt;/label&gt;
&lt;input id="accountEmailPassword" type="password" name="accountEmailPassword"/&gt;
&lt;/p&gt;
&lt;p class="submit"&gt;
&lt;input type="button" onclick="checkEmailSettings();" value="Send" name="submit"/&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label&gt;Mail Server:&lt;/label&gt;
&lt;input id="mail2server" type="text" name="mail2server"/&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label&gt;Mail Type:&lt;/label&gt;
&lt;select id="mail2type" name="mail2type"&gt;
&lt;/select&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label&gt;Mail Security:&lt;/label&gt;
&lt;select id="mail2security" name="mail2security"&gt;
&lt;/select&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label&gt;Mail Server Port:&lt;/label&gt;
&lt;input id="mail2port" type="text" name="mail2port"/&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label&gt;Mail Username:&lt;/label&gt;
&lt;input id="mail2username" type="text" name="mail2username"/&gt;
&lt;/p&gt;
&lt;p class="submit"&gt;
&lt;input id="mailsend" type="button" name="mailsend" onclick="checkEmailSettings();" value="Send"/&gt;
&lt;/p&gt;
&lt;/form&gt;
</code></pre>

<p>Which is appended to an existing form.</p>

<p>However when I do $('#mail2server').val() it returns blank, even if there is something in the box.  If I do $('#mail2server').attr('name') it returns the name, so it definitely recognizes that the element exists.  Any ideas why this would be failing?</p>

<p>Cheers,
Gazler.</p>

<p>EDIT</p>

<pre><code>function checkEmailSettings()
{
    var emailAddress=$("#accountEmailAddress").val();
    var emailPassword=$("#accountEmailPassword").val();
    var datastring = "emailaddress="+emailAddress+"&amp;emailpassword="+emailPassword;
    if (additionalInfo == 1)
    {
        var mailserver = $("#mail2server").val();
        var mailtype = $("#mail2type").val();
        var mailsecurity = $("#mail2security").val();
        var mailport = $("#mail2port").val();
        var mailusername = $("#mail2username").val();
        alert($("#mail2server").val());
        datastring += "&amp;mailserver="+mailserver+"&amp;mailtype="+mailtype+"&amp;mailsecurity="+mailsecurity+"&amp;mailport="&amp;mailport+"&amp;mailusername="+mailusername;
    }
    $('input[type=text]').attr('disabled', 'disabled');
    $('input[type=password]').attr('disabled', 'disabled');
    $('input[type=button]').attr('disabled', 'disabled');
    $.ajax({
        type: "GET",
        url: "checkemailsettings.php",
        data: datastring,
        async: true,
        cache: false,
        timeout:50000, 

        success: function(data){
        switch(parseInt(data))
        {
                //SNIPPED
        case 4:
         alert("More information needed.");
         if (additionalInfo == 0)
        {
         var string = addTextToForm("Mail Server","mail2server");
         string += addOptionsToForm("Mail Type","mail2type", new Array("IMAP", "POP3"));
         string += addOptionsToForm("Mail Security","mail2security", new Array("NOTLS", "TLS", "SSL"));
         string += addTextToForm("Mail Server Port","mail2port");
         string += addTextToForm("Mail Username","mail2username");
         string += addButtonToForm("Send","mailsend", "checkEmailSettings();");
         alert(string);
         $('form[name=account]').append(string);
         additionalInfo = 1;
        }
          break;
        }
        },
    });
}

    function addTextToForm(strLabel, strID, strVal)
    {
    if (!strVal) {return "&lt;p&gt;&lt;label&gt;"+strLabel+":&lt;/label&gt;&lt;input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" /&gt;&lt;/p&gt;";}
        return "&lt;p&gt;&lt;label&gt;"+strLabel+":&lt;/label&gt;&lt;input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" value=\""+strVal+"\"/&gt;&lt;/p&gt;";
    }
    function addButtonToForm(strLabel, strID, functionName)
    {
        return "&lt;p class=\"submit\"&gt;&lt;input id=\""+strID+"\" value=\""+strLabel+"\" onclick=\""+functionName+"\" type=\"button\" name=\""+strID+"\"/&gt;&lt;/p&gt;";
    }

    function addOptionsToForm(strLabel, strID, optionsArr)
    {
        var returnstring="&lt;p&gt;&lt;label&gt;"+strLabel+":&lt;/label&gt;&lt;select id=\""+strID+"\" name=\""+strID+"\"&gt;";
        for (i=0; i&lt;optionsArr.length; i++)
        {
            returnstring += "&lt;option&gt;"+optionsArr[i]+"&lt;/option&gt;";
        }
        returnstring += "&lt;/select&gt;&lt;/p&gt;";
        return returnstring;
    }
</code></pre>
