jquery - jQuery 中的 $(form).submit 和 $(form).on ("submit") 有什么区别？

Question

我编写了以下代码，它不会在我的浏览器中导致 AJAX 调用:

$(document).ready(function () {
  $('form').submit(function(event) {
    event.preventDefault();
    var action = $(this).attr('action');
    var data = $(this).serialize();
    $.post(action, data, function(response) {
      $("#die").html(response);
    });
  });
});

但是，我的老师在类里面实时编码了以下代码，该代码确实有效:

$(document).ready(function () {
  $("form").on("submit", function(event) {
    event.preventDefault();
    var action = $(this).attr("action");
    var formData = $(this).serialize();
    $.post(action, formData, function(responseContent) {
      $("#die").html(responseContent);
    });
  });
});

据我所知，我的代码和他的代码之间唯一有意义的区别是第 2 行使用“on”与“submit”。事实上，在 api.jquery.com/submit 上，jQuery 基金会指出“此方法是 .on('submit', handler)... 的快捷方式”。这让我很困惑为什么这两个片段的行为不同。

Answer 1

注意: .on() 和 .off() 是撰写本文时(2014 年 8 月)最新的 jQuery 语法。

如果您使用 jQuery 1.7 或更高版本，方法 .bind()、.delegate() 和 .live() 应该 <强>不被使用。这同样适用于 .unbind()、.undelegate() 和 .die()。

<小时/>

简介:

类似于jQuery's .on('click') vs .click() ，使用 .on('submit') 与 .submit() 相比有许多优点:

在 .on('click') vs .click() answer from andreister ，他指出内存使用量较小，我希望 .on('submit') 与 .submit() 的内存使用量相同。

但是 .on('submit') 与 .submit() 相比，更显着的优势是某种“编程便利性”:

1. 使用动态添加的元素
2. 命名空间 andreister 也提到了(我在他的回答的评论中指出了这一点)

请参阅下面的一些示例用法，了解这一切是如何工作的。

<小时/>

使用动态添加的元素:示例用法 1

在 jsbin.com/puqahunovido/1/edit?html,js,console 上观看实时演示(单击右上角的“运行/清除”)

基本上，您可以告诉 jQuery“观察”某个元素是否有任何子元素(直接或未提交)被提交。如果您向此元素动态添加新表单，这尤其有用。然后，您不需要将这些新表单“重新 Hook ”到 jQuery 处理程序。

<小时/>

命名空间:示例用法 1

在 jsbin.com/xalenefilifi/1/edit?html,js,console 上观看实时演示(单击右上角的“运行/清除”)

/* bind form submission to 2 jQuery event handlers, each having a different namespace */
$(".js-form-hook-xyz").on("submit.hey", function() { console.log("hey!"); });
$(".js-form-hook-xyz").on("submit.hello", function() { console.log("hello!"); });

$(".js-form-hook-xyz").submit(); /* point 1: displays "hey!hello!" */

/* ... later in the code, unbind form submission for ONLY 1 handlers */
$(".js-form-hook-xyz").off("submit.hello");

$(".js-form-hook-xyz").submit(); /* point 2: displays "hey!" */

结果是，如果表单在“点 1”提交，则两个处理程序都会被附加，从而被调用。随后，在“第 2 点”处理程序“submit.hello”不再附加，因此只有其他处理程序触发。

<小时/>

命名空间:示例用法 2:

在 jsbin.com/vubolacozuwe/1/edit?html,js,console 上观看实时演示(单击右上角的“运行/清除”)

/* bind form submission to 2 jQuery event handlers, each having the SAME namespace */
$(".js-form-hook-xyz").on("submit.greetings", function() { console.log("Bonjour!"); });
$(".js-form-hook-xyz").on("submit.greetings", function() { console.log("Hola!"); });

$(".js-form-hook-xyz").submit(); /* point 1: displays "Bonjour! Hola!" */

/* ... later in the code, unbind form submission for ".greetings" namespace handlers */
$(".js-form-hook-xyz").off(".greetings");

$(".js-form-hook-xyz").submit(); /* point 2: displays nothing, handlers were removed */

结果是，如果表单在“点 1”提交，则两个处理程序都会被附加，从而被调用。随后，在“第 2 点”处理程序“.greetings”命名空间处理程序已被删除，因此不会显示任何内容。

<小时/>

我现在可能能想到更酷的示例用法，因此我将在下次再讨论。只需查看 jQuery 文档并在 SO 或 Google 上搜索类似主题即可。我相信你会发现很多有趣的事情。

资源:

1. Difference between .on('click') vs .click()
2. How to unbind a specific event handler
3. http://api.jquery.com/on/#event-names
4. api.jquery.com/on
5. api.jquery.com/submit