我是一名学生，任务是创建各种网络表单作为作业。我创建了一个简单的表单，单击“提交”后，应该捕获输入的信息并使用 console.log 记录它。作为确保 jQuery 事件正常工作的简单测试，当我单击“提交”时，我应该在控制台中看到“hi”显示。我按原样使用 PreventDefault，但这种情况仍在发生。我的印象是 PreventDefault 应该停止重新加载。此外，点击提交后，我注意到一个“？”已插入我的网址中。例如，如果我位于“www.webpage.com/#create”，单击“提交”后，我会看到“www.webpage.com/?#create”，在“#create”之前有一个问号。根据我的阅读，我的浏览器在点击提交后重新加载时似乎“丢失”了。
HTML - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<nav>
<div class="bars">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="links">
<li><a href="#home">Home</a></li>
<li><a href="#create">Create</a></li>
<li><a href="#edit">Edit</a></li>
<li><a href="#login">Log-in/Create Account</a></li>
</ul>
</nav>
</header>
<div id="app">
<!-- inject html -->
</div>
<footer></footer>
<!-- javascript/jQuery -->
<script src="lib/jquery-3.7.1.min.js"></script>
<script type="module" src="model/model.js"></script>
<script type="module" src="app/app.js"></script>
</body>
</html>
html - injected into #app div by jQuery
<section class="create">
<h1>Create Form</h1>
<form>
<div class="inputRow">
<input type="text" id="fName" name="fName" placeholder="First Name" />
<input type="text" id="lName" name="lName" placeholder="Last Name" />
</div>
<div class="inputRow">
<input type="tel" id="pTel" name="pTel" placeholder="Personal Phone" />
<input type="tel" id="wTel" name="wTel" placeholder="Work Phone" />
</div>
<div class="inputRow">
<input type="email" id="email" name="email" placeholder="Email" />
<input type="number" id="age" name="age" placeholder="Age" />
</div>
<input type="url" id="website" name="website" placeholder="Website" />
<div class="inputRow three">
<input type="text" id="username" name="username" placeholder="Username" />
<input
type="password"
id="password"
name="password"
placeholder="Password"
/>
<input type="password" id="pin" name="pin" placeholder="Pin" />
</div>
<input type="submit" id="create-submit" value="Submit" />
</form>
</section>
jQuery - app.js
// changeRoute import from model.js
import { changeRoute } from "../model/model.js";
// initListener funtion
function initListener(){
// listens for hash changes to change content
$(window).on("hashchange", changeRoute);
changeRoute();
// listens for submit button click
$("#create-submit").click(function (e) {
e.preventDefault();
console.log("hi");
});
}
// calling funtions
$(document).ready(function(){
initListener();
});
jQuery - model.js
// function export to inject html
export function changeRoute(){
// declare varibables
let hashTag = window.location.hash;
let pageID = hashTag.replace("#", "");
// change content
if(pageID != ""){
$.get(`pages/${pageID}/${pageID}.html`, function(data){
$("#app").html(data);
});
}else{
$.get(`pages/home/home.html`, function(data){
$("#app").html(data);
});
}
}
我通过使用上面的 jQuery 将 html 注入索引来进行导航，我认为这是问题所在。提交点击的监听器位于我上面的 app.js 代码中。最重要的一点是 - 我不能偏离上面使用的方法/功能。
$("#create-submit").click(function (e) { e.preventDefault(); console.log("hi"); });必须按照作业说明提供。我已经向班上的其他人提出了这个问题，但尚未得到任何答复。
我相信我已经通过 html 注入将问题缩小到“导航”，这也是我需要保留的。我基本上将所有代码复制/粘贴到一个新项目中，并将注入的部分硬编码到我的 index.html 中，然后删除我的 model.js 和从我的 app.js 中导入的内容。此时，我可以单击提交按钮，并且控制台中会按预期显示“hi”。
对于我这个新手来说，看起来页面在单击“提交”后重新加载，此时“？”注入到 URL 中，因为浏览器基本上不知道它应该去哪里。
您可以使用 jQuery
.serialize().split().join()$("form").submit(function(e) {
e.preventDefault();
console.log($(this).serialize().split("&").join("\n"));
});