[SOLVED] JQuery 2.1.4 preventDefault on form submit not working

I have a form in HTML that I am trying to handle with JQuery 2.1.4 by using event.preventDefault() in the .on('submit', function(event) {}) method but it just reloads even though I have event.preventDefault() in there. Here is my HTML, CSS, and JS code:

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>

Any help would be greatly appreciated.