0

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

});
4

6 回答 6

0

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

$(document).on('click', '#formusername', function(){
    alert("You clicked me!");
});
于 2013-07-31T06:25:24.013 回答
0

在事件委托上使用动态添加的元素，在您的案例 ID 中form

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

委托给.logindiv您的情况下最近的静态父级。

于 2013-07-31T06:26:52.640 回答
0

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

.live() 已弃用，您应该为此使用 .on()。

您可以在 $(document) 上执行 .on() 操作，但遍历 dom 中的该元素需要很长时间。

所以 ，

$('.logindiv').on('click','#formusername',function(){
    alert("Here comes the alert pop up");
});
于 2013-07-31T06:34:13.200 回答
0

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

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

根据你的条件

于 2013-07-31T06:28:52.720 回答
0

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

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

更好的选择是最初隐藏表单。

于 2013-07-31T06:29:17.933 回答
0

我认为 Arun P Johny 的回答可能是最优雅的解决方案。无论如何，如果您不想使用委托，您可能还可以在 loginForm() 中添加点击事件，或者在 data === "false" 检查中调用它之后立即添加。

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

于 2013-07-31T06:51:17.983 回答