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

我做了一个脚本，如果用户没有登录，将创建一个登录表单。我已经使用html（）函数创建了表单（让我知道如果有更好的选择）。到目前为止，这工作正常，表单会在用户输入正确的用户名/密码后登录用户。无法在从jQuery脚本添加的表单上运行jquery函数

我的问题是，我不能然后在这些新添加的表单上运行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!"); 
    }); 

});

来源

2013-07-31 Braden Jageman

为您的代码创建一个小提琴。 –

您需要使用事件代表团，因为formusername元素动态

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

来源

2013-07-31 06:25:24

我将来一定会使用该方法，但我只是使用click - > alert作为示例。还有其他一些我不能做的事情，比如向事先创建的div添加新文本。 –

事件代表团使用增加了动态添加元素而你的情况ID form

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

代表到最近的静态父母，你的情况是.logindiv。

来源

2013-07-31 06:26:52 bipen

你为什么不能有登录表单的HTML和隐藏它

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

根据你的条件

来源

2013-07-31 06:28:52 Netwidz

是的！我意识到这是我的问题的一部分。我没有尝试.on（）建议，但是你的解决方案明确地解决了我的问题，并且是我从现在开始应该做的方法。谢谢！ –

不客气......我很乐意帮忙 – Netwidz

动态添加事件，你应该使用.on()绑定点击功能

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

更好替代将保持形式隐藏在内。

来源

2013-07-31 06:29:17 anil

由于事件在绑定到dom之前绑定，所以应该使用jQuery .live（）或.on（）。

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

您可以在$（文档）上执行.on（），但需要花费很多时间遍历dom中的该元素。

所以，

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

来源

2013-07-31 06:34:13

我认为阿伦P佐尼的答案可能是最优雅的解决方案。无论如何，如果你不想使用委托，你也可以在loginForm（）中添加点击事件，或者在data ===“false”检查中调用它。

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

来源

2013-07-31 06:51:17 Stratboy

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

回答

相关问题