在加载请求中调用的表单不​​通过jquery工作

Question

我已经设置了一个登录系统，例如，如果您点击导航栏中的#log-in a标签，登录屏幕将从 php登录页面加载到同一页面中，此系统是现在正在处理纯PHP的帖子请求，我想通过jquery工作，所以我也可以检查任何用户错误。

我试图像往常一样在它上面实现jquery，但是jquery没有任何工作，即表单仍然是通过php提交。

每页

html

    <ul id="nav"><li id="log-in"><a href="../../login/">Log In</a></li></ul>

php登录页面

<div id="login">

<form name="login" action="../../login/index.php" method="post">
  <label>Username<input name="username" type="text" value="" /></label>
  <label>Password<input name="password" type="password" value="" /></label>
  <input type="submit" value="LogIn" id="login-join-submit"/>
</form>

</div><!--end of login->

Jquery的

$('#log-in a').click(function() {

    $('#nav').append("<div id='background'></div><div id='wrapper'><div id='close'><p>Close[X]</p></div><div id='container'></div></div>");

    $('#container').load('../../login/index.php #login');

    $('#close p, #background').click(function() {
        $('#wrapper, #container, #close, #background').remove();
    });
    return false;
});

$('#login form[name=login]').submit(function(){
       alert('login');
       return false;
});

正如您所见，login中加载了#container形式，然后将jquery提交应用于它，但它不是通过jquery工作，而是通过php工作。

请参阅并建议任何可行的方法。

感谢。

Answer 1

对于动态生成的元素，应该委托事件，从元素的静态父项或文档对象之一，您可以使用on方法。

$(document).on('submit', '#login form[name=login]', function(){
     alert('login');
     return false;
});

请注意，#background元素的事件也应该委派：

$('#nav').on('click', '#background', function() {
    $('#wrapper').remove();
});