提交按钮在动态加载的内容中不起作用


Submit button not working in dynamically loaded content

我在我的索引.html文件中使用 javascript 来加载带有另一个 javascript 表单的登录 php 页面,如果我直接进入登录.php页面,那么提交按钮工作正常,但是一旦它加载到我的索引.html文件中,即使视觉上所有内容都已正确加载到我的屏幕上,它也不会做任何事情。

这是我的索引.html

<!doctype html>
<html>
<head>
</head>
<body>
<div id='myStyle'></div>
<script src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#myStyle').load('./login.php');
});
</script>
</body>
</html>

这是登录.php文件

<script type="text/javascript" src="sha512.js"></script>
<script type="text/javascript" src="forms.js"></script>
<?php
include 'db_connect.php';
include 'functions.php';
sec_session_start();
if(isset($_GET['error'])) { 
  if($_GET['error']==1) {
    echo 'Error Logging In!';
  }
}
if(login_check($mysqli) == true) {
  header('Location: ./registration.php');
} else {
?>
<html>
<head>
   <title>Sprinkler Controller - Login</title>
</head>
<body>
    <table border="0" align="center">
    <form action="process_login.php" method="post" name="login_form">
       <tr>
       <td>Email:</td><td><input type="text" name="email"</td>
       </tr>
       <tr>
       <td>Password:</td><td><input type="password" name="password" id="password"/></td>
       </tr>
       <tr>
       <td colspan ="2" align="center"><input type="button" value="Login" onclick="formhash(this.form, this.form.password);" /></td>
       </tr>
    </form>
    </table>
</body>
</html>
<?php
}
?>

请注意,登录.php从表单加载表单.js

function formhash(form, password) {
   // Create a new element input, this will be out hashed password field.
   var p = document.createElement("input");
   // Add the new element to our form.
   form.appendChild(p);
   p.name = "p";
   p.type = "hidden"
   p.value = hex_sha512(password.value);
   // Make sure the plaintext password doesn't get sent.
   password.value = "";
   // Finally submit the form.
   form.submit();
}

四处阅读,我认为我需要添加一些东西

$(document).on('submit', '#password', function(evt){
  evt.preventDefault();
})

但我不仅不确定我需要在该文件中放置哪个文件以及该文件中的位置,我不确定这是否是我真正需要做的来修复它!

<!doctype html>
<html>
<head>
</head>
<body>
<div id='myStyle'></div>
<script src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#myStyle').load('./login.php');
    $(document).on('submit', 'form', function(evt){
      evt.preventDefault();
    })
  });
</script>
</body>
</html>

四处询问,我发现总体问题是我试图将登录.php文件中的整个 HTML 页面加载到 DIV 中。 我放弃了index.html文件,直接登录.php而不是试图将其包装在html页面中。