why is jQuery click event firing multiple times

Question

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

user400654 · Accepted Answer · 2014-03-04 19:26:30Z

18

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

edited Mar 4, 2014 at 19:26

answered Mar 4, 2014 at 19:20

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

iambdot Over a year ago

how would you handle this if the main click event (.creategene) occurs in a knockoutjs click binding self.createGene = function () { }

user400654 Over a year ago

I would have done this using data attributes rather than javascript, then bound to the close event.

user400654 Over a year ago

well, not the close event, but just the "Yes" button. There's no real need to initialize the modal or have a click event to open it.

Anoop Joshi P · Accepted Answer · 2014-03-04 19:23:28Z

2

change the code like this

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

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

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


    });
    $('#confirmCreateYes').click(function () {
            $('#confirmCreateModal').modal('hide');

            var test = "123";
            alert(test);
            console.log(test);             
        });
});

fiddle

You dont have to bind $('#confirmCreateYes').click in each button click.

answered Mar 4, 2014 at 19:23

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Comments

sajalsuraj · Accepted Answer · 2016-01-07 16:16:06Z

2

You can try this also -

$("#confirmCreateYes").unbind().click(function() {
//Stuff
});

answered Jan 7, 2016 at 16:16

sajalsuraj

1,0021 gold badge18 silver badges35 bronze badges

1 Comment

Louis Barranqueiro Over a year ago

A code block alone does not provide a good answer. Please add explanations (why it solve the issue, where was the mistake, etc...)

kylealonius · Accepted Answer · 2014-03-04 19:29:45Z

1

Add this to your code:

$( "#confirmCreateYes").unbind( "click" );

Like this:

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

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

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

    $('#confirmCreateYes').click(function () {
        $('#confirmCreateModal').modal('hide');

        var test = "123";
        alert(test);
        console.log(test);
        $( "#confirmCreateYes").unbind( "click" );
    });
});

});

It will unbind the event, so that it isn't bound on top of the previous event. This allows the event only to fire within the original click event.

This is not a good method. It will unbind all click events attached to the element. I will leave it here for learning purposes.

edited Mar 4, 2014 at 19:29

answered Mar 4, 2014 at 19:22

kylealonius

2232 silver badges9 bronze badges

3 Comments

Robert Noack Over a year ago

This isn't going to work. If this approach is chosen, the unbind would need to be before the bind, not inside the function implementation(?). But still this is a poor approach for multiple reasons, the first being that you are blindly unbinding all click events attached to this item, not necessarily just the one in question.

user400654 Over a year ago

No, it makes more sense for it to be where @kylealonius put it than anywhere else. It will be unbound at the earliest possible point. Though, it would make more sense to further reduce that down to using .one() rather than .click() so that you don't even have to unbind it yourself. But then you get to, why unbind it at all? It can only be triggered while the modal is visible anyway.

kylealonius Over a year ago

Robert is correct about unbinding all click events. I had not thought of that. I was trying to preserve the original design. But since the create yes button has an ID, the other approaches are much better since the click event will not fire for any other element.

Kvvaradha · Accepted Answer · 2022-08-01 06:15:44Z

0

As of now its the below code worked for me,

$("#parentID").off("click", ".button").on("click", ".button", function(e){
     e.preventDefault(); // stop probagation if its button or a href
     // your code here  
 });

answered Aug 1, 2022 at 6:15

Kvvaradha

8421 gold badge15 silver badges29 bronze badges

Collectives™ on Stack Overflow

why is jQuery click event firing multiple times

5 Answers 5

3 Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related