这是我的HTML表单:
<form class="access_form" action="/elements/login.php" method="POST">
<div class="logo">
<img src="/img/brand/logo.png" alt="logo" class="brand">
</div>
<div class="form">
<div class="input_container">
<input type="text" placeholder="Username" name="username" required>
<input type="password" placeholder="Password" name="password" required>
<button type="submit" name="login" id="submit">Login</button>
<p id="alert"></p>
<h5 class="linked_text_forgot"><a class="linked_text_forgot" href="javascript:">Forgot your password?</a></h5>
</div>
<div class="small_container">
<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form('sign_up');">Sign up</a></h5>
</div>
</div>
</form>
这是我的javascript:
// form switching function to login or signup form
function switch_form(type) {
if (type == "login") {
$( 'form.access_form' ).replaceWith(login);
} else if (type == "sign_up") {
$( 'form.access_form' ).replaceWith(sign_up);
}
return false;
}
$( document ).ready(function() {
$(".access_form").submit(function(event){
event.preventDefault();
});
});
// sign up form
var sign_up = '<form class="access_form" action="/elements/signup.php" method="POST">' +
'<div class="logo">' +
'<img src="/img/brand/logo.png" alt="logo" class="brand">' +
'</div>' +
'<div class="form">' +
'<div class="input_container">' +
'<input type="text" placeholder="Full name" name="fullname">' +
'<input type="text" placeholder="Email" name="email" id="user_email">' +
'<input type="text" placeholder="Username" name="username" id="user_uid">' +
'<input type="password" placeholder="Password" name="password" id="user_pswd">' +
'<button type="submit" name="sign_up" id="submit">Sign Up</button>' +
'<p class="alert"></p>' +
'</div>' +
'<div class="small_container">' +
'<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form("login");">Login</a></h5>' +
'</div>' +
'</div>' +
'</form>';
// login form
var login = '<form class="access_form" action="/elements/login.php" method="POST" id="login">' +
'<div class="logo">' +
'<img src="/img/brand/logo.png" alt="logo" class="brand">' +
'</div>' +
'<div class="form">' +
'<div class="input_container">' +
'<input type="text" placeholder="Username" name="username" required>' +
'<input type="password" placeholder="Password" name="password" required>' +
'<button type="submit" name="login">Login</button>' +
'<p class="alert"></p>' +
'<h5 class="linked_text_forgot"><a class="linked_text_forgot" href="javascript:">Forgot your password?</a></h5>' +
'</div>' +
'<div class="small_container">' +
'<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form("sign_up");">Sign up</a></h5>' +
'</div>' +
'</div>' +
'</form>';
因此,从我之前的问题中我发现,在页面启动时,preventdefault可以在正常加载的html元素上起作用,但是如果您以注册表单的形式查看javascript im加载而无需使用jquery来重新加载页面。我认为这就是为什么preventdefault在页面上加载的html元素上不起作用的原因。
关于如何解决这个问题的任何建议?
答案 0 :(得分:-1)
基本上,第一次加载页面时,jQuery仅将事件处理程序附加到元素一次。动态创建的任何元素(页面首次加载时不存在)都需要手动添加事件处理程序,或者您可以将事件处理程序附加到页面加载中存在的DOM中较高的元素上。在您的示例中,您可以将事件处理程序附加到文档(该文档始终存在),并告诉它从.access_form
元素中查找提交事件。
此页面上的答案对此有所解释。 Click event doesn't work on dynamically generated elements
$( document ).on('submit','.access_form', function(event){
event.preventDefault();
});