jQuery中的$(form).submit和$(Form)submit(“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);
    });
  });
});

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

Answer 1

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

如果您使用的是jQuery 1.7或更高版本，则应使用方法.bind()、.delegate()和.live()，而不是使用而不是。这同样适用于.unbind()、.undelegate()和.die()。

Introduction:

与jQuery's .on('click') vs .click()类似，使用.on('submit')与.submit()可以增加许多优势：

在.on('click') vs .click() answer from andreister中，他指出内存使用量更小，我预计.on('submit')与.submit()的内存使用量也是如此。

但与.submit()相比，.on('submit')更显著的优势在于某种“编程上的便利”：

动态添加elements

• namespaces的

1. Working andreister也提到(我在他的回答的评论中指出)

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

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

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

基本上，您可以告诉jQuery“观察”元素是否有其子元素(直接或非直接)被提交。如果您向此元素动态添加新表单，这将特别有用。然后，您不需要将这些新表单“重新挂钩”到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!" */

结果是，如果表单是在"point 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 */

结果是，如果表单是在"point 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

Answer 2

你说得对，这两个应该是一样的。$(form).submit和$(Form)submit(“submit”)之间的区别可能不是这里的问题。检查控制台日志并逐步执行代码？