jQuery方法：.submit()和.trigger('submit')之间的区别

Question

jQuery允许通过以下方式之一以编程方式触发表单提交：

• $('.js-form-class-hook').submit();

• $('.js-form-class-hook').trigger('submit');

---

注意：我的理解是，.trigger('submit')相对于.submit()的作用就像.on('submit',function(e){});相对于.submit(function(e){});的作用一样。简而言之，.trigger('submit')是以编程方式提交表单的更强大的方法。

我已经知道.on('submit',function(e){});和.submit(function(e){});之间的一些区别，请参见我在What's the difference between $(form).submit and $(form).on("submit") in jQuery?上的回答，现在我想更好地了解.trigger('submit')的作用。

---

我的结论：经过一些研究，我发现使用.trigger('submit')似乎提供了“唯一”的（虽然非常强大的）优势，即允许传递任意数据。

---

示例用法1：

例如，这可以用于区分“人类”与“程序化”表单提交。

在jsbin.com/jivexawixonu/1/edit?html,js,console,output上查看实时演示（点击右上方的Run/Clear）

HTML

<form class="js-form-hook-xyz">
   <button>Submit form</button>
</form>

jQuery

var pleaseConfirmSubmission = function( formElem ){
  // ... some conditions checks
  // if condition met, submit with a flag
  formElem.trigger( "submit" , ['isProgrammaticalSubmission'] );
}


$("body").on("submit", ".js-form-hook-xyz", function(event, isProgrammaticalSubmission) {
  console.log("on form submission: " +  ( isProgrammaticalSubmission || "isHumanAction !" ) );
  if ( !isProgrammaticalSubmission ){ /* JS truthy/falsy value usage */
    event.preventDefault(); /* cancel form submission */
    pleaseConfirmSubmission( $(this) );
  }
});

---

资源：

1. api.jquery.com/submit
2. api.jquery.com/trigger
3. api.jquery.com/on
4. www.inkling.com/read/jquery-cookbook-cody-lindley-1st/chapter-8/recipe-8-5

---

.trigger('submit') 提供了其他额外的功能吗？

还是说“允许传递任意数据”是使用 .trigger('submit') 的唯一优势？

- Adriano

Answer 1

submit()没有参数和trigger('submit')本质上没有区别，事实上，没有参数的submit()最终也会返回trigger()。

您可以通过查看jQuery源代码来证明这一点：

jQuery.fn.submit()

function (data, fn) {
    return arguments.length > 0 ? this.on(name, null, data, fn) : this.trigger(name);
}

因此，如果将参数传递给submit()，则将调用.on('submit'...，否则将调用.trigger('submit')。

submit()基本上是一种更易读的调用trigger('submit')的方式。 两者都没有特殊功能，您可以根据个人喜好选择其中之一。

注意： click()，change()等也是如此。

使用.trigger('submit')的唯一优点是“允许传递任意数据”吗？

除非您认为少调用一个函数是优点，否则是的。

- George

---

我澄清了我的问题并添加了这个编辑：“.trigger（'submit'）提供的其他附加功能是否还有我错过的？或者使用.trigger（'submit'）的唯一优点是“允许传递任意数据”？” - Adriano

就像@George所说的那样，源代码已经回答了这个问题：submit()函数所做的只是调用trigger('submit')函数。因此实际上没有任何区别。 - Sir Celsius

@AdrienBe 两者都没有特别的功能，选择哪一个是个人偏好。 - George

@George 你真的读完整个问题了吗？如果是，你不认为“传递任意数据”是一个额外的功能吗？ - Adriano

好的，是的，但你已经知道了，我为什么要再告诉你一遍呢？我的意思是，没有额外的功能你不知道的。 - George