jQuery click fires twice

Question

I have this jsfiddle: http://jsfiddle.net/us28bg4u/1/

How come, that, when I press "First" -> "Left" the action is only fired once. But when I do it again, the action is fired twice, and third time I press the same, it fires three times and so on.

I cant figure out why it is stacking up. Can someone enlighten me? :)

I have tried with:
e.stopPropagation();
e.preventDefault();
- but nothing seems to prevent the clicks for stacking up.

my js looks like this:

    var side = '';
    var action = '';

    $(document).ready(function () {
        $(".first").click(function (e) {
            logit("First pressed");
            preStart('first');
        });

        $(".second").click(function (e) {
            logit('Second pressed');
            preStart('second');
        });

        function preStart(action) {
            $("#overlay").fadeIn(200);

            $(".leftside").click(function (e) {
                side = "left";
                $("#overlay").fadeOut(200);

                logit('Starting ' + action + ' (' + side + ')');
             });

            $(".rightside").click(function (e) {
                side = "right";
                $("#overlay").fadeOut(200);

                logit('Starting ' + action + ' (' + side + ')');
            });
        }

        function logit(logtxt){
            $("#log").append("<li>"+logtxt+"</li>");

        }
    });

Has it something to do with the click() functions being in another function?

Answer 1

You are binding handlers to the events inside the click handler that's why it's happening,

Do it like bellow

    var side = '';
    var action = '';

    $(document).ready(function () {
        $(".first").click(function (e) {
            logit("First pressed");
            preStart('first');
        });

        $(".second").click(function (e) {
            logit('Second pressed');
            preStart('second');
        });

        $(".leftside").click(function (e) {
                side = "left";
                $("#overlay").fadeOut(200);

                logit('Starting ' + action + ' (' + side + ')');
             });

            $(".rightside").click(function (e) {
                side = "right";
                $("#overlay").fadeOut(200);

                logit('Starting ' + action + ' (' + side + ')');
            });

        function preStart(action) {
            $("#overlay").fadeIn(200);
        }

        function logit(logtxt){
            $("#log").append("<li>"+logtxt+"</li>");

        }
    });

FIXED DEMO

Answer 2

Event bindings can stack. Inside of preStart clear the previous binding by adding .unbind() into the method chain before the event is bound again like so:

    function preStart(action) {
        $("#overlay").fadeIn(200);

        $(".leftside").unbind("click").click(function (e) {
            side = "left";
            $("#overlay").fadeOut(200);

            logit('Starting ' + action + ' (' + side + ')');
         });

        $(".rightside").unbind("click").click(function (e) {
            side = "right";
            $("#overlay").fadeOut(200);

            logit('Starting ' + action + ' (' + side + ')');
        });
    }

Answer 3

Handle the click event with OWN parameter Like this. Try this one,

 $(".leftside").click(function (e) {
     if(!e.handled){
         e.handled = true;
         side = "left";
         $("#overlay").fadeOut(200);

         logit('Starting ' + action + ' (' + side + ')');
     }

});

$(".rightside").click(function (e) {
      if(!e.handled){
            e.handled = true;
             side = "right";
             $("#overlay").fadeOut(200);

            logit('Starting ' + action + ' (' + side + ')');
       }   

  });

Update Fiddle

Answer 4

It depends how many times you invoke preStart, when you click first you bind $(".leftside").click() $(".rightside").click() once, as you click through first or second one more time you created another binding on $(".leftside") and $(".rightside"), so on so forth.

You can always unbind it before you bind it again.

$(".leftside").unbind('click').click(function (e) {
    // your code
}

Fiddle