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
}

小提琴