在 AJAX 回调中取消绑定提交事件

Question

如果未选中复选框，我会发出警报并阻止表单提交（单击提交按钮或 Enter）并绑定 false。我需要在 AJAX 回调中取消绑定，但无法执行此操作。

HTML：

<form action="act.php" onsubmit="formSubmit()" id="TypeForm" name="TypeForm" method="POST">
<label>
<input type="radio" name="Type" value="1">
<span>Type 1</span>
</label>
<label>
<input type="radio" name="Type" value="2">
<span>Type 2</span>
</label>
<input type="submit" name="submit" id="submit" value="Next" />
</form>

Javascript/JQuery：

<script>
  function formSubmit() {
    var self=this;
    $(self).bind('submit', false);
    if ($('#TypeForm').find('input:radio:checked').length == 0) {
      alert('A selection is required.');
    } else {
        $.ajax({
          type: "POST",
          url: "add.php",
          success: function() {
            $(self).unbind();
          }
        });
    }
  }
</script>

提前感谢您的帮助！

Answer 1

也许您忘记了事件名称 - $(self).unbind('submit'); ？

Answer 2

您想在用户按 Enter 或单击提交按钮时停止正常提交表单吗？然后您需要阻止事件采取默认操作。试试这个：

function formSubmit(event) {
    var self=this;

    event.preventDefault();

    if ($('#TypeForm').find('input:radio:checked').length == 0) {
      alert('A selection is required.');
    } else {
        $.ajax({
          type: "POST",
          url: "add.php",
          success: function() {
            $(self).unbind();
          }
        });
    }
  }

---

编辑：正如Trevor提到的，您应该使用jQuery来绑定您的函数，以便正确设置事件以在不同的浏览器上工作。代码可以是：

$(function() {
  $('#TypeForm').submit(formSubmit);
});

但我会像这样重写您的代码（未测试）：

<script>

  $(function() {
    $('#TypeForm').submit(function (event) {
      var self=this;

      event.preventDefault();

      if ($(this).find('input:radio:checked').length === 0) {
        alert('A selection is required.');
        return false;
      }

      $.ajax({
        type: "POST",
        url: "add.php",
        success: function (data) {
          alert('success, data: ' + data); // optional
          // no need for this: $(self).unbind();
        }
      });
    }
  });

</script>

并从 HTML 中删除 onsubmit="formSubmit()" 。

Answer 3

首先，
var self=这个；

应该是

var self=$(this)

其次，
您必须将表单绑定到 jQuery 事件模型中的提交操作才能访问 $(this)。

例：

$(function() { // short hand document ready call
   $('form-name').submit(function(formSubmit());
}

还有，为什么要解绑呢？