jquery - jQuery で送信が 2 回発生する

Question

偶発的な送信を防ぎ、ユーザーが入力したすべての情報を再確認するようにするために、本当に送信するかどうかを尋ねる別のボタンをポップアップさせて、フォームの送信を遅らせました...

残念ながら、ユーザーが [いいえ] をクリックし、後で [はい] ボタンを使用してフォームを送信すると、フォームが 2 回送信されます。ユーザーが以前に「いいえ」をクリックしたことがないときに初めて機能します...

私は小さなjsfiddle hereを用意しました。それが私のコードです:

$('#form').on('click','#submitbutton',function(e){
        e.preventDefault()
        $('#formchecker').show()
        $('#doit').click(function(e2){
            e2.preventDefault()
            alert('I will submit as you say')                
        })
        $('#dont').click(function(e2){
            e2.preventDefault()
            $('#formchecker').hide()
        })
})

「はい」で送信する前に「いいえ」をクリックすると、複数の警告ボックスが表示されることがわかります。なぜそれがそのように振る舞うのか、誰かがヒントを得ましたか？

Answer 1

送信ボタンがクリックされるたびに、クリック イベントが [はい] ボタンと [いいえ] ボタンに追加されますが、それらをクリアすることはないため、[送信] をクリックしてから [いいえ] を 5 回クリックすると、最後に [はい] をクリックすると 5 回発生します。

新しいイベントをバインドするunbind前にクリック イベントをバインドするか、送信ボタンのクリック イベント内でクリック イベントをバインドしないでください。

Answer 2

onClick イベントではなく、onSubmit イベントをリッスンする必要があります。