无法在从jquery脚本添加的表单上运行jquery函数

I made a script that will create a login form if the user is not logged in. I've created the form with the html() function (let me know if there is a better alternative). So far this is working fine and the form will log the user in once a proper username/pass is given.

My problem is that I can't then run jquery functions on these newly added forms even if the code is added after the fact. For example, something like

$('#usernamefield').attr('value', 'login');

will do nothing. Obviously I'm doing something wrong but I'm not sure what. I've provided the relevant code below (the section on submitting to the server is removed). All this code does is creates the form when the user is not logged in. Then I just want an alert to pop up when I click on the username form, but obviously that part doesn't work in this example.

//This will create the login form and will submit data to the server and perform an action based on the results
var loginForm = function(){
    $('.logindiv').html("<!-- Form Code Start --><form id='login' method='post' accept-charset='UTF-8'><input type='hidden' name='submitted' id='submitted' value='1'/><div><span class='error'></span></div><label for='username' >UserName*:</label><input type='text' name='formusername' id='formusername' value='' maxlength='50' /><span id='login_username_errorloc' class='error'></span><label for='password' >Password*:</label><input type='password' name='formpassword' id='formpassword' maxlength='50' /><span id='login_password_errorloc' class='error'></span><input type='submit' name='Submit' value='Submit' /></form>")
};

$(document).ready(function(){
    //Check Login and load appropriate apps based on result
    $.post('./reg_source/check_login.php', function(data)   { 
        //If the user is logged in then this section will run. Ugh double negatives!
        if (data !== "false") {
            getUserData(data);
            $('.logindiv').html("Welcome back, "+dbdata[4]+"! <br> <a href='reg_source/logout.php'>Logout</a> | <a href='profile.php'>Profile</a>");
        }
        //If the user is NOT logged in then this will run
        else if (data === "false")
        {
            loginForm();
            $('.registerdiv').html("<a href = 'register.php'>Register Here</a>");
        }
    });

    $('#formusername').click(function(){
        alert("You clicked me!");
    });

});

You need to use event delegation, since the formusername element is added dynamically

$(document).on('click', '#formusername', function(){
    alert("You clicked me!");
});

use on event delegation for dynamically added element which in your case id form

 $('.logindiv').on('click','#formusername',function(){
    alert("You clicked me!");
});

delegate to closest static parent which is .logindiv in your case.

Why can't you have the login form in the HTML and make it hidden

$('.logindiv').show(); or $('.logindiv').hide();

As per your conditions

for dynamically added events you should use .on() to bind click function

$('.logindiv').on('click','#formusername', function(){
        alert("You clicked me!");
    });

better alternative would be to keep the form hidden intially.

Since the event is bind before it is attached to the dom you should use jquery .live() or .on().

.live() is deprecated you should be using .on() for this.

You can do it .on() on $(document) but it take much time to traverse to that element in dom.

So ,

$('.logindiv').on('click','#formusername',function(){
    alert("Here comes the alert pop up");
});

I think Arun P Johny answer is probably the most elegant solution. Anyway, if you don't want to use delegation, you probably can also add the click event in loginForm() OR right after calling it inside the data === "false" check.

The point here is simply that you are adding the click event 'ondomready', while the formusername is the result of an ajax call (therefore async). In other words, formusername doesn't exist yet ondomready, so your code can't find it. You have to be sure you add the event after creating the form.