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 Foundation は次のように述べています。このメソッドは、.on('submit', handler)..." のショートカットです。これにより、2 つのスニペットの動作が異なる理由について混乱が生じます。

score 9 · Accepted Answer

注: .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()の回答で、彼はメモリ使用量が少ないことを指摘しています。vs についても同じことが予想され.on('submit')ます.submit()。

.on('submit')しかし、 vsのはるかに重要な利点.submit()は、ある種の「プログラム上の利便性」です。

動的に追加された要素の操作
名前空間とreisterも言及しました（彼の回答のコメントで指摘しました）

以下の使用例を参照して、これがどのように機能するかを確認してください。

動的に追加された要素の操作: 使用例 1

jsbin.com/puqahunovido/1/edit?html,js,consoleでライブデモを参照してください (右上の [Run/Clear] をクリック) 。

基本的に、要素にその子 (直接またはそうでない) が送信されているかどうかを「監視」するように jQuery に指示できます。これは、この要素に新しいフォームを動的に追加する場合に特に便利です。その後、これらの新しいフォームを jQuery ハンドラーに「再フック」する必要はありません。

名前空間: 使用例 1

jsbin.com/xalenefilifi/1/edit?html,js,consoleでライブデモを参照してください (右上の [Run/Clear] をクリック) 。

/* 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でライブデモを参照してください (右上の [Run/Clear] をクリック) 。

/* 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 を調べて、SO または Google で同様のトピックを検索してください。きっと面白いものがたくさん見つかります。

資力：

score 5 · Accepted Answer

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 );
    };
});

jquery - jQueryの$(form).submitと$(form).on("submit")の違いは何ですか?

3 に答える 3

Related

Reference