7

我编写了以下代码，它不会在我的浏览器中导致 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)..." 的快捷方式。这让我对为什么这两个片段的行为不同感到困惑。

4

3 回答 3

9

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

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

介绍：

与jQuery 的.on('click')vs.click()类似，使用.on('submit')vs.submit()增加了许多优点：

在andreister的.on('click')vs.click()回答中，他指出内存使用量更小，我希望.on('submit')vs也一样.submit()。

.on('submit')但是vs更显着的优势.submit()是某种“编程便利”：

  1. 使用动态添加的元素
  2. 命名空间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!" */

结果是，如果表单在“点 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. .on('click') 与 .click() 之间的区别
  2. 如何取消绑定特定的事件处理程序
  3. http://api.jquery.com/on/#event-names
  4. api.jquery.com/on
  5. api.jquery.com/submit
于 2014-09-03T08:40:03.113 回答
5

如果您查看 jQuery .submit()文档

此方法是 .on('submit', handler) 的快捷方式

它们的行为相同

正如您在 jQuery 的内部代码中看到的那样，使用简写版本将在内部调用.on()

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
});
于 2013-06-27T20:08:19.537 回答
1

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

于 2013-06-27T20:23:20.947 回答