如何更改同一事件的事件触发顺序？

Question

Jquery绑定是惊人的,但我不知道绑定发生的顺序.我现在的问题是:

$(document.body).delegate('form', methods.checkForm);
$('form').bind('submit', methods.submitFormIfCheckedFormIsTrue);

methods.checkForm = function (e) {
    if (!$(this).isVerified()) {
        return false;
    }
    return true;
};
methods.submitFormIfCheckedFormIsTrue = function (e) {
    e.preventDefault();
    $.ajax("/submitForm", {
        data:$(this).serialize(),
        type:"post"
    });
};

这显然不是我正在使用的实际代码,但它非常接近.会发生什么,commitFormIfCheckedFormIsTrue函数在checkForm函数之前或期间触发,因此检查非常无用.我的黑客是将"已检查"类添加到表单中并检查表单是否在其他函数中具有该类...但是然后单击"提交",它会检查,然后您必须再次单击它以提交它如果一切顺利......这是迟钝的.

另一件关于这个问题很重要的事情是,由于无法改变的原因,我在应用程序中处于完全不同的部分.而且,它们是异步加载的.

我想知道的主要事情是...如何更改顺序,或以某种方式设置事件的优先级......

Answer 1

如果您按照示例中的方式使用“委托”，那么 ajax 提交始终会首先运行，因此您的问题的简短答案是“您不能”。您的委托附加到“body”元素，因此附加到 DOM 树中更接近表单的元素的事件将首先触发。

事件从表单 -> 主体冒泡，因此在执行此操作时没有顺序。

一种选择是让您的验证触发第二个事件。

methods.checkForm = function (e) {
  e.preventDefault()

  if ($(this).isVerified()) {
    $(this).trigger('form-verified');
  }
};

然后，您可以将其绑定到 ，而不是将其他处理程序'submit'绑定到'form-verified'。

$('form').bind('form-verified', methods.submitFormIfCheckedFormIsTrue);

如果它们附加到同一元素而不是使用委托，这也是完成排序事件的另一种方法。

另外，如果您使用的是 jQuery >= 1.7，那么您应该使用on而不是bindand delegate。http://api.jquery.com/on/

更新

如果两者都绑定到同一个元素，那么它们将按照它们附加到该元素的顺序被触发。假设 checkForm 在另一个事件之前绑定，那么问题是，return false;如果其他事件附加到同一元素，则不会阻止它们触发。为此你还需要e.stopImmediatePropagation().

methods.checkForm = function (e) {
  e.preventDefault()

  if (!$(this).isVerified()) {
    e.stopImmediatePropagation();
  }
};

如果您需要调整事件的顺序，这里还有一个有用的答案。jQuery 事件处理程序总是按照它们绑定的顺序执行 - 有什么办法解决这个问题吗？