jQuery submit event not firing after I reparse form created from a partial view

Question

I have a page that uses ajax to render partial views for two forms (student, teacher). When I switch between the two forms (with nav links) and they are fetched and rendered with Ajax I loose my validation. So I tried adding some "reparsing" method to my code that gets called after I fetch the partial view. (links to SO threads SO link So link) This I think works because if I try and submit I see my validation errors showing, but now my Jquery submit events don't fire.

I have 3 events that submit the 2 different forms. Note - I'm loading the student partial view first so I need to have 2 events to catch this submission shown below.

$("#studentSubmit").submit(function(event) {
  event.preventDefault();
  submitStudentForm();
});
$(document).on('submit', '#studentSubmit', function(event) {
  event.preventDefault();
  submitStudentForm();
});
$(document).on('submit', '#teacherSubmit', function(event) {
  event.preventDefault();
  submitTeacherForm();
});

Here are the two calls to fetch the partial views and the method that reparses the form. When I add reparseForm() my 'studentSubmit' and 'teacherSubmit' submit events stop working.

$('#studentProfileLink').on('click', function(event) {
  //load student profile
  var options = {
    url: '/Profile/LoadStudentProfile',
    type: "post",
    data: {}
  };

  $.ajax(options).done(function(data) {
    $("#profileSection").html(data);
    reparseform();

  }).fail(function(jqXHR, textStatus) {
    $('#errorHomePage').show().fadeOut(8000).text('Error Calling Server -' + textStatus);
  });
});

$('#teacherProfileLink').on('click', function() {
  //load teacher profile
  var options = {
    url: '/Profile/LoadTeacherProfile',
    type: "post",
    data: {}
  };

  $.ajax(options).done(function(data) {
    $("#profileSection").html(data);
    //reparseTeacherForm();
    reparseform();

  }).fail(function(jqXHR, textStatus) {
    $('#errorHomePage').show().fadeOut(8000).text('Error Calling Server -' + textStatus);
  });
});

var reparseform = function() {
  $("form").removeData("validator");
  $("form").removeData("unobtrusiveValidation");
  $.validator.unobtrusive.parse("form");

};

Answer 1

It looks like by putting some of the submit events inside my ajax call, they now fire when I hit submit.

Here is what I did. I moved them from the $(document).ready(function () {}

to inside the ajax return call like this. Can anyone explain why they won't work if they are in $(document).ready?

$('#teacherProfileLink').on('click', function() {
      //load teacher profile
      var options = {
        url: '/Profile/LoadTeacherProfile',
        type: "post",
        data: {}

      };

      $.ajax(options).done(function(data) {


        $("#profileSection").html(data);

        reparseform();
        $("#teacherSubmit").submit(function(event) {
          event.preventDefault();
          submitTeacherForm();
        });
        $(document).on('submit', '#teacherSubmit', function(event) {
          event.preventDefault();
          submitTeacherForm();
        });

      }).fail(function(jqXHR, textStatus) {
        $('#errorHomePage').show().fadeOut(8000).text('Error Calling Server -' + textStatus);
      });