重新解析从部分视图创建的表单后，jQuery 提交事件未触发

Question

我有一个使用 ajax 为两种形式（学生、教师）呈现部分视图的页面。当我在两种表单（带有导航链接）之间切换并使用 Ajax 获取和呈现它们时，我失去了验证。因此，我尝试在获取部分视图后调用的代码中添加一些“重新解析”方法。 （链接到 SO 线程 SO link So link）我认为这是可行的，因为如果我尝试提交，我会看到我的验证错误显示，但现在我的 Jquery 提交事件不会触发。

我有 3 个事件提交 2 个不同的表单。注意 - 我首先加载学生的部分视图，所以我需要有 2 个事件来捕捉下面显示的这个提交。

$("#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();
});

这是获取部分视图的两个调用和重新解析表单的方法。当我添加 reparseForm() 时，我的“studentSubmit”和“teacherSubmit”提交事件停止工作。

$('#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

看起来通过将一些提交事件放在我的 ajax 调用中，它们现在会在我点击提交时触发。

这就是我所做的。我把它们从 $(document).ready(function () {}

像这样在 ajax 返回调用内部。谁能解释为什么如果它们在 $(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);
      });