Submit happens twice with jQuery

Question

To prevent accidental submits and make sure the user doublechecks all the information he entered, I delayed the submit of a form by having popup another button that asks whether he really wants to submit...

Unfortunately when the user clicks 'no' and submits the form later with the 'yes' button, it will submit twice. It works the first time when the user hasn't clicked 'no' before...

I prepared a little jsfiddle here, and thats my code:

$('#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()
        })
})

You can see when clicking 'nah' before submitting with 'yes', there will be more than one alert-box. Someone got a hint why it behaves that way ?

Answer 1

Each time the submit button is clicked you are adding click events to the yes and no buttons, but you are never clearing them, so if you were to click submit then no 5 times, finally clicking yes would fire 5 times.

You should unbind the click events before binding new ones, or don't bind the click events within the click event of the submit button.