Php Can'；t在从jquery脚本添加的表单上运行jquery函数

我制作了一个脚本，如果用户没有登录，它将创建一个登录表单。我已经用html（）函数创建了表单（如果有更好的选择，请告诉我）。到目前为止，这一切都很好，一旦给出正确的用户名/通行证，表单就会让用户登录

我的问题是，我无法在这些新添加的表单上运行jquery函数，即使代码是在添加之后添加的。比如说

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

我什么也做不了。显然我做错了什么，但我不知道是什么。我已经在下面提供了相关代码（关于提交到服务器的部分被删除）。此代码所做的只是在用户未登录时创建表单。然后，我只想在单击用户名表单时弹出一个警报，但显然在本例中该部分不起作用

//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!");
    });

});

//这将创建登录表单，并将数据提交到服务器，并根据结果执行操作
var loginForm=函数（）{
$（'.logindiv'）.html（“用户名*：密码*：”）
};
$（文档）.ready（函数（）{
//检查登录并根据结果加载相应的应用程序
$.post（'./reg_source/check_login.php'，函数（数据）{
//如果用户已登录，则此部分将运行。啊，双重否定！
如果（数据！=“假”）{
getUserData（数据）；
$（'.logindiv'）.html（“欢迎回来，+dbdata[4]+”！
|）；
}
//如果用户未登录，则此操作将运行
否则如果（数据==“假”）
{
loginForm（）；
$（'.registerdiv'）.html（“”）；
}
});
$（'#formusername'）。单击（函数（）{
警惕（“你点击了我！”）；
});
});

您需要使用事件委派，因为

formusername

元素是动态添加的

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

---

对动态添加的元素使用事件委托，在您的案例id

form

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

---

委托给最近的静态父对象，在您的情况下是

.logindiv

。

为什么不能将登录表单保存在HTML中并将其隐藏

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

---

根据您的条件

对于动态添加的事件，您应该使用

.on（）

绑定单击功能

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

---

更好的选择是保持表单初始隐藏。

因为事件在附加到dom之前是绑定的，所以应该使用jquery.live（）或.on（）

.live（）已被弃用。您应该为此使用.on（）

您可以在$（document）上执行它。on（），但在dom中遍历该元素需要很多时间

所以

---

我认为Arun p Johny的答案可能是最优雅的解决方案。无论如何，如果不想使用委托，也可以在loginForm（）中添加click事件，或者在data==“false”检查中调用它之后立即添加

---

这里的要点很简单，您正在添加click事件“ondomready”，而formusername是ajax调用的结果（因此是异步的）。换句话说，formusername还不存在，所以您的代码找不到它。您必须确保在创建表单后添加事件。

为您的代码创建一个小提琴。是的！我意识到这是我问题的一部分。我还没有尝试过.on（）建议，但您的解决方案肯定解决了我的问题，并且是我从现在开始应该采用的方法。谢谢我以后肯定会使用这种方法，但我只是以单击->警报为例。还有其他我不能做的事情，比如向预先创建的div添加新文本。

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