javascript - HTML 表单框字段不会保持单击状态

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) ');
});});

您实际上是在说“当用户单击表单的任何部分时，完全替换表单的内容”。因此，每次您单击表单时，该表单都会被新内容覆盖。并且新内容不会被“点击”(你的意思是聚焦)。