JQuery 2.1.4 preventDefault on form submit 不起作用

Question

我在 HTML 中有一个表单，我试图通过在 .on('submit', function(event) {}) 方法中使用 event.preventDefault() 来处理 JQuery 2.1.4，但它只是即使我在那里有 event.preventDefault()，也会重新加载。这是我的 HTML、CSS 和 JS 代码：

var gradeDiv = document.getElementById("grade");
var citDiv = document.getElementById("cit");
var debug = document.getElementById("debug");
var cats = [0, 0, 0, 0];
var catNames = ["nothing", "nothing", "nothing", "nothing"]
var catsGrades = [0, 0, 0, 0];
var hwttl = 0;
var hwcom = 0;
var hwinc = 0;
var cit = 0;
var citg = ["U", "N", "S"];

function calculateCatGrade(catGrades) {
  var grade = catGrades;
  return Math.round(grade);
}

function calculateLetterGrade(grade) {
  var g = "";
  if (grade > 97) {
    g = "A+";
  } else if (grade > 92) {
    g = "A";
  } else if (grade > 89) {
    g = "A-";
  } else if (grade > 87) {
    g = "B+";
  } else if (grade > 82) {
    g = "B";
  } else if (grade > 79) {
    g = "B-"
  } else if (grade > 77) {
    g = "C+";
  } else if (grade > 72) {
    g = "C";
  } else if (grade > 69) {
    g = "C-"
  } else if (grade > 67) {
    g = "D+";
  } else if (grade > 62) {
    g = "D";
  } else if (grade > 59) {
    g = "D-"
  } else if (grade > 55) {
    g = "F+";
  } else if (grade > 5) {
    g = "F";
  } else if (grade > 0) {
    g = "F-";
  } else if (grade <= 0) {
    return "NG";
  }
  return g + ": " + grade;
}

function calculateTtlGrade(catPer, grades) {
  var amount = catPer.length;
  var gradet = 0;
  for (var i = 0; i < amount; i++) {
    c = calculateCatGrade(grades[i]) * catPer[i];
    gradet += c;
  }
  gradet /= 100;
  return calculateLetterGrade(Math.round(gradet));
}

function calculateHw(hwt, hwc, hwi) {
  hw = 0;
  hw += parseInt(hwc);
  hw += parseInt(hwi) / 2;
  if (hwt - hw >= 8) {
    return 0;
  } else if (hwt - hw >= 5) {
    return 1;
  } else {
    return 2;
  }
}

function refreshGrades() {
  gradeDiv.textContent = "| "
  for (var i = 0; i < catsGrades.length; i++) {
    if (cats[i] > 0 || catsGrades[i] > 0 || catNames[i] != "nothing") {
      gradeDiv.innerHTML += catNames[i] + ": " + calculateLetterGrade(calculateCatGrade(catsGrades[i])) + " | "
    }
  }
  gradeDiv.innerHTML += "<br />"
  gradeDiv.innerHTML += "Total: " + calculateTtlGrade(cats, catsGrades);
  i = calculateHw(hwttl, hwcom, hwinc);
  if (i > cit) {
    citDiv.textContent = citg[i];
  } else {
    citDiv.textContent = citg[cit];
  }
  $("form").on("submit", function(event) {
    event.preventDefault();
    var per1 = $("#per1").val();
    var nm1 = $("#nm1").val();
    var gd1 = $("#gd1").val();
    var per2 = $("#per2").val();
    var nm2 = $("#nm2").val();
    var gd2 = $("#gd2").val();
    var per3 = $("#per3").val();
    var nm3 = $("#nm3").val();
    var gd3 = $("#gd3").val();
    var per4 = $("#per4").val();
    var nm4 = $("#nm4").val();
    var gd4 = $("#gd4").val();
    /*
      var htotal = $("#hwttl").val();
      var hcompl = $("#hwcom").val();
      var hincom = $("#hwinc").val();*/
    cats[0] = parseInt(per1);
    catNames[0] = nm1;
    catsGrades[0] = gd1;
    cats[1] = per2;
    catNames[1] = nm2;
    catsGrades[1] = gd2;
    cats[2] = per3;
    catNames[2] = nm3;
    catsGrades[2] = gd3
    cats[3] = per4;
    catNames[3] = nm4;
    catsGrades[3] = gd4;
    /*
      hwttl = htotal;
      hwcom = hcompl;
      hwinc = hincom;*/
    refreshGrades();
  });
  refreshGrades();

body {
  background: black;
  color: white;
}

#grade {
  color: red;
}

#cit {
  color: lightgreen;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Grades</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <form name="form">
    <input type="text" placeholder="category 1" id="nm1" value="nothing" />
    <input type="number" placeholder="percent" id="per1" value="0" />
    <input type="number" placeholder="grades" id="gd1" value="0" />
    <br />
    <input type="text" placeholder="category 2" id="nm2" value="nothing" />
    <input type="number" placeholder="percent" id="per2" value="0" />
    <input type="number" placeholder="grades" id="gd2" value="0" />
    <br />
    <input type="text" placeholder="category 3" id="nm3" value="nothing" />
    <input type="number" placeholder="percent" id="per3" value="0" />
    <input type="number" placeholder="grades" id="gd3" value="0" />
    <br />
    <input type="text" placeholder="category 4" id="nm4" value="nothing" />
    <input type="number" placeholder="percent" id="per4" value="0" />
    <input type="number" placeholder="grades" id="gd4" value="0" />
    <br />
    <br /> Homework:
    <input type="number" id="hwttl" placeholder="assignments" />
    <input type="number" id="hwcom" placeholder="completed" />
    <input type="number" id="hwinc" placeholder="late/incomplete" />
    <br />
    <br />
    <input type="submit" value="Submit" />
  </form>

  <div id="grade"> </div>
  <div id="cit">S</div>
  <div id="debug"> </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
  </script>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

如有任何帮助，我们将不胜感激。

Answer 1

您没有关闭函数 refreshGrades 伙计。我刚刚关闭了你的功能...

检查浏览器的日志

在表单事件之前关闭函数 refreshGrades 后，代码停止失败，表单事件正常启动。

关闭函数：

检查控制台：

现在，我不知道这是否是您预期的行为，但现在至少 JS 代码没有失败。

JQuery 2.1.4 preventDefault on form submit 不起作用

JQuery 2.1.4 preventDefault on form submit not working

jquery

forms

preventdefault

jquery-on