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

您正在将处理程序绑定到click处理程序内部的事件，这就是发生这种情况的原因，

像波纹管一样做

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

        }
    });

固定演示

Answer 2

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

    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

像这样用OWN参数处理click事件。 试试这个

 $(".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 + ')');
       }   

  });

更新小提琴

Answer 4

这取决于您调用preStart的次数，第一次单击时，将$（“。leftside”）。click（）$（​​“。rightside”）。click（）绑定一次，一次又一次单击则绑定一次。在$（“。leftside”）和$（“。rightside”）上创建了另一个绑定，依此类推。

您始终可以先解除绑定，然后再重新绑定。

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

小提琴