javascript - jQuery 单击触发两次

Question

我有这个jsfiddle:http://jsfiddle.net/us28bg4u/1/

为什么，当我按“First”->“Left”时，该操作仅被触发一次。但是当我再次执行此操作时，该操作会触发两次，第三次按相同的操作时，它会触发三次，依此类推。

我不明白为什么它会堆积起来。有人可以启发我吗？ :)

我尝试过:
e.stopPropagation();
e.preventDefault();
- 但似乎没有什么可以阻止点击次数的累积。

我的js看起来像这样:

    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>");

        }
    });

这与另一个函数中的 click() 函数有关吗？

Answer 1

事件绑定(bind)可以堆叠。在再次绑定(bind)事件之前，在 preStart 内部通过将 .unbind() 添加到方法链来清除以前的绑定(bind)，如下所示:

    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 + ')');
        });
    }