Question

如果用户没有登录，我创建了一个创建登录表单的脚本。我已经使用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!");
    });

});

Answer 1

您需要使用事件委派，因为formusername元素是动态添加的

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

Answer 2

在事件委托中使用动态添加的元素，在您的情况下为form

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

委托最接近的静态父级，在您的情况下为.logindiv。

Answer 3

为什么不能在HTML中使用登录表单并使其隐藏

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

根据您的条件

Answer 4

对于动态添加的事件，您应该使用.on()来绑定点击功能

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

更好的替代将保持表格隐藏。

Answer 5

由于事件在附加到dom之前是绑定的，因此应使用jquery .live（）或.on（）。

.live（）已弃用，您应该使用.on（）。

你可以在$（document）上执行.on（）但是在dom中遍历那个元素需要花费很多时间。

所以，

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

Answer 6

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

这里的要点仅仅是你要添加click事件'ondomready'，而formusername是ajax调用的结果（因此是异步）。换句话说，formusername尚未存在，因此您的代码无法找到它。您必须确保在创建表单后添加事件。

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

6 个答案: