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

Kevin B · Accepted Answer · 2014-03-04T19:26:30.127

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 04 '14 at 19:26

answered Mar 04 '14 at 19:20

Kevin B

94,570
16
163
180

how would you handle this if the main click event (.creategene) occurs in a knockoutjs click binding self.createGene = function () { } – iambdot Mar 04 '14 at 19:45
I would have done this using data attributes rather than javascript, then bound to the close event. – Kevin B Mar 04 '14 at 19:47
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. – Kevin B Mar 04 '14 at 19:57

score 2 · Answer 2 · answered Mar 04 '14 at 19:23

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.

score 2 · Answer 3 · answered Jan 07 '16 at 16:16

2

You can try this also -

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

answered Jan 07 '16 at 16:16

sajalsuraj

922
15
29

A code block alone does not provide a good answer. Please add explanations (why it solve the issue, where was the mistake, etc...) – Louis Barranqueiro Jan 07 '16 at 18:17

kylealonius · Answer 4 · 2014-03-04T19:29:45.207

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 04 '14 at 19:29

answered Mar 04 '14 at 19:22

kylealonius

223
2
9

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. – Robert Noack Mar 04 '14 at 19:29
1

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. – Kevin B Mar 04 '14 at 19:29
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. – kylealonius Mar 04 '14 at 19:32

score 0 · Answer 5 · answered Aug 01 '22 at 06:15

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 01 '22 at 06:15

Kvvaradha

732
1
13
28

why is jQuery click event firing multiple times

5 Answers5

Linked

Related