单击提交按钮后，在 URL 中获取“？”。preventDefault 存在于 jQuery 中。认为html注入是问题-解网

问：

我是一名学生，任务是创建各种 Web 表单作为作业。我创建了一个简单的表单，单击提交后，应该捕获输入的信息并将其控制台 .log。作为确保我的jQuery事件正常工作的简单测试，当我单击提交时，我应该在控制台中看到“hi”显示。我正在按原样使用preventDefault，这种情况仍在发生。我的印象是preventDefault应该停止重新加载。此外，单击“提交”后，我注意到我的 url 中插入了一个“？”。例如，如果我处于“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注入将问题缩小到“导航”，这也是我需要保留的东西。我基本上将所有代码复制/粘贴到一个新项目中，并将注入的部分硬编码到我的索引 .html 中，然后从我的应用程序 .js 中删除我的模型 .js 和导入。此时，我可以单击提交按钮，控制台中会按预期显示“hi”。

在我新手看来，页面在点击提交时会重新加载，此时“？”会注入到 URL 中，因为浏览器基本上失去了它应该去哪里。

javascript html jquery 表单 preventdefault

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <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>

单击提交按钮后，在 URL 中获取“？”。preventDefault 存在于 jQuery 中。认为html注入是问题

Getting a "?" in URL after clicking submit button. preventDefault is present in jQuery. Believe html injection is issue

评论

评论