【jQuery・Ajax】 Submitイベントがクリックした回数分追加で実行されてしまう

Question

いつもお世話になっております。

早速本題に入らせていただきます。

jQueryを使用してAjaxを実装したのですが、2回目以降にイベントが重複実行されてしまいます。
下記が現在のコードとなります。

---

$('#btn').click(function(){
   console.log("1");

   $("form").submit( function(event) {
        console.log("2");
        event.preventDefault();
        var form = $(this);
        $.ajax({
            url: form.prop("action"),
            method: form.prop("method"),
            data: form.serialize(),
            timeout: 10000,
            dataType: "text",
        })
        .done( function(data) {
            console.log("3");
            if (data.length > 0) {
                    alert("Error");
            } else {
                    alert("Success");
            }
        })
    });
});

出力結果

// 1回目
1
2
3


// 2回目
1
2
2
3
3

// 3回目
1
2
2
2
3
3
3

---

上記の通り、なぜかsubmit()以降の処理がどんどんと増えていきます。

on('click') を click に変更してみたり、諸々調べてみましたが、解決策が見つかりませんでした。

お時間ある方でjQueryのイベントが複数回実行されてしまう件に関して知識をお持ちの方いらっしゃいましたら、ご助力頂けますと幸いです。

Answer 1

（すみません解決しました...）

$("form").submit( function(event) {
     $("form").off();

formタグに対して off()をするとイベントの重複実行が阻止できるらしい。
へぇ・・・学びました。

JQuery で、２回目のSubmitが重複で動作してしまう

Comments

[m.ts10806]

html次第ですけどformのsubmit要らない気がします。
Ajaxするということは送信先は非同期でサーバーサイドとなるわけですし。

[azuapricot]

あれ・・・確かに・・・・？？？？？？？ちょっとやってみます！

[azuapricot]

（なんか画面真っ白になっちゃったからまた今度ためします。。。）

[m.ts10806]

これもhtml次第ですがボタンもtypeはbuttonでいいのかなと。Ajax後に画面遷移させたいならJavaScriptでするとかで。
確かにon()は追加型だったはずなので提示の現象になるのでPJAXとかで 全部制御するならoff()も同時に使うのは有用です。
要件と流れを整理してみてください。