Question

这是我的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元素上不起作用的原因。

关于如何解决这个问题的任何建议？

Answer 1

基本上，第一次加载页面时，jQuery仅将事件处理程序附加到元素一次。动态创建的任何元素（页面首次加载时不存在）都需要手动添加事件处理程序，或者您可以将事件处理程序附加到页面加载中存在的DOM中较高的元素上。在您的示例中，您可以将事件处理程序附加到文档（该文档始终存在），并告诉它从.access_form元素中查找提交事件。

此页面上的答案对此有所解释。 Click event doesn't work on dynamically generated elements

$( document ).on('submit','.access_form', function(event){
    event.preventDefault();
});

为什么event.preventDefault（）对使用jquery加载的html元素不起作用

1 个答案: