jQuery：在某些操作中绑定会导致多次执行答案

【问题标题】：jQuery: bind within some action causes mutliple executionsjQuery：在某些操作中绑定会导致多次执行
【发布时间】：2011-09-21 14:30:28
【问题描述】：

好的，我只是要求解除绑定特定的按键事件。我现在用命名空间事件解决了这个问题。但是我遇到了另一个问题......下面的函数在animate() 显示一个div之后绑定了一个按键事件。它运作良好，但按键事件似乎计算次数，函数被执行......在我的情况下，myFnc() 在单击链接时执行......所以当我单击链接时，keypress.f 事件被触发一个时间...但是当在我按下键之前单击链接不止一次时，虽然我只按下了一次键，但 keypress 事件也执行了不止一次....所以 fadeToggle() 将执行 5 次只需按下一个键，当该功能在五次点击之前执行 5 次时...有人明白我的意思并可以帮助我吗？

function myFnc() {
        $('#somediv').animate({    
            height: 'toggle'              
        }, 600, function() { 

            $(document).bind('keypress.f', function(event) {

                if($('#secret').is(':visible')) {  

                    if ( event.which == 102 ) {
                        $('.content-2').fadeToggle();
                        $('.content-284').fadeToggle();
                    }
                }
                else {                        
                    $(document).unbind('keypress.f');                        
                }
            });

        });

}

【问题讨论】：

标签： jquery events keypress

【解决方案1】：

你可以用类似的方法解决这个问题

var bound_keypress_f = false;

function myFnc() {
        $('#somediv').animate({    
            height: 'toggle'              
        }, 600, function() { 
            if (!bound_keypress_f) {
                $(document).bind('keypress.f', function(event) {

                    if($('#secret').is(':visible')) {  
                        if ( event.which == 102 ) {
                            $('.content-2').fadeToggle();
                            $('.content-284').fadeToggle();
                        }

                        bound_keypress_f = true;
                    }
                    else {                        
                        $(document).unbind('keypress.f');                        

                        bound_keypress_f = false;
                    }
                });
            }
        });
}

【讨论】：

【解决方案2】：

您正在绑定 5 个 keypress.f 事件（每次单击链接时都会绑定一个）。您可以通过几种不同的方式解决此问题：

1) 在绑定 keypress.f 事件之前，解绑所有 keypress.f 事件。

2) 页面加载时绑定keypress.f事件，并在函数开头添加if(flag)。每当单击链接时，将标志设置为 true。当您不希望 keypress.f 触发该功能时，将标志设置为 false。

【讨论】：

您的第一个解决方案运行良好...谢谢！（其他的没试过）

【解决方案3】：

使用.is() method 和:animated selector 仅在动画当前未进行时应用动画。（如果问题是在动画进行时多次单击）

function myFnc() {
    var $somediv = $('#somediv');
    if (!$somediv.is(':animated')) {
        $somediv.animate({
            height: 'toggle'
        }, 600, function() {

            $(document).bind('keypress.f', function(event) {

                if ($('#secret').is(':visible')) {

                    if (event.which == 102) {
                        $('.content-2').fadeToggle();
                        $('.content-284').fadeToggle();
                    }
                }
                else {
                    $(document).unbind('keypress.f');
                }
            });

        });
    }
}

另一种解决方案是在绑定新按键之前始终取消绑定按键。

$(document).unbind('keypress.f');
$(document).bind('keypress.f', function(event) {...});

这样它就永远只有一个..

【讨论】：