Question

我正在开发一个项目，需要一个登录表单供用户访问该页面。单击登录按钮时，我调用以下函数：

$(document).ready(function() {
$("#login").click(function(){
    $("#login").html('<form name="login" action="login" method="post" accept-charset="utf-8"><ul><li><label for="usermail">Email</label><input type="email" name="usermail" placeholder="yourname@email.com" required></li><li><label for="password">Password</label><input type="password" name="password" placeholder="password" required></li>  <li> <input type="submit" value="Login"></li>  </ul>  </form>  <form name="register" action="register" method="post" accept-charset="utf-8">  <ul>  <li><label for="username">Username</label>  <input type="username" name="username" placeholder="username" required></li>  <li><label for="usermail">Email</label>  <input type="email" name="usermail" placeholder="yourname@email.com" required></li>  <li><label for="password">Password</label>  <input type="password" name="password" placeholder="password" required></li>  <li>   <input type="submit" value="Register"></li>  </ul>  </form> ');
});});

登录按钮的div如下所示：

 <div class="row row1" id="login"><button>Login</br><p class="glyphicon glyphicon-user"></p></button>
</row>

我当前遇到的问题是，当您点击表单的其中一个框时，它不会让您保持点击该框。它立即取消选中该框，使其无法登录。有谁知道为什么会这样？任何帮助将不胜感激。

Answer 1

使用此代码

$("#login").click(function(){
    $("#login").html('<form ... (very long string) ');
});});

您实际上在说＃34;当用户点击表单的任何部分时，完全替换表单的内容＆＃34;。因此，每次单击它时，表单都会被新内容覆盖。并且新内容不会被点击＆＃34; （你的意思是专注）。

Answer 2

我发现的另一种方法是取消绑定点击事件：将其用作参考jsFiddle。它可能会给你更好的想法，所以发布它

$("#login").click(function(){ 
    $("#login").unbind('click');
    $("#login").html('<form..... >');
    .....
 });

HTML表单框字段不会保持单击

2 个答案: