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 Foundation声明“此方法是.on（'submit'，handler）的快捷方式......”。这让我很困惑，为什么这两个片段的表现不同。

Answer 1

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

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

<强>简介

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

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

但.on('submit') vs .submit()更为显着的优势是某种“程序化方便”：

使用动态添加的元素
名称空间 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 doc＆amp;在SO或Google上搜索类似主题。你会发现一些有趣的东西我确定。

<强>资源：

Answer 2

如果你看一下jQuery .submit() docs

This method is a shortcut for .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 );
    };
});

Answer 3

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

jQuery中$（form）.submit和$（form）.on（“submit”）之间的区别是什么？

3 个答案: