Question

151

why is jQuery click event firing multiple times

rated 0 times [ 157] [ 6] / answers: 1 / hits: 25016 / 10 Years ago, tue, march 4, 2014, 12:00:00

I have this sample code here
http://jsfiddle.net/DBBUL/10/

    $(document).ready(function ($) {



    $('.creategene').click(function () {



        $('#confirmCreateModal').modal();



        $('#confirmCreateYes').click(function () {

            $('#confirmCreateModal').modal('hide');



            var test = 123;

            alert(test);

            console.log(test);             

        });

    });

});

If you click the create button 3 times and each time you click yes on the confirmation, the alert is fired multiple times for each click instead of just one time.

If you click the create button 3 times and each time you click no and on the 4th time you click yes the alert is fired for each of the previous clicks instead of just one time.

this behavior seems weird to me as i would expect the alert to be fired once per click. Do I have to use .unbind() or is there a better solution?

Could someone please tell me why this is happening and how to fix it?

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devlin

Add To Favorites

Follow

Total Points: 474

Total Questions: 113

Total Answers: 100

Location: Sweden

Member since Fri, Apr 16, 2021

3 Years ago

answered 10 Years ago sandra · Accepted Answer

Because you are binding it multiple times. Click event inside a click event means every time you click, a new click event is being bound on top of the previously bound events. Do not bind click events inside of click events unless the click event creates the element. There's also no need to re-initialize the modal over and over.

$(document).ready(function ($) {



    $('#confirmCreateModal').modal({show: false});



    $('#confirmCreateYes').click(function () {

        $('#confirmCreateModal').modal('hide');



        var test = 123;

        alert(test);

        console.log(test);             

    });



    $('.creategene').click(function () {



        $('#confirmCreateModal').modal('show');



    });

});

Demo