javascript - 每次调整窗口大小时，jQuery Click 事件都会触发更多次

Question

人!

这是我第一次来这里问问题，到目前为止，总是当我遇到问题时，我都能在这里找到很好的答案。所以，首先要感谢这个了不起的社区!

现在让我们来解决问题:

我正在做一个响应式菜单来检查 window.resize 事件，当它适合最小浏览器宽度时，允许按钮的点击功能。如果浏览器宽度更大，则点击功能未绑定(bind)。我需要这样做，因为移动版本上的按钮元素是桌面版本上的视觉元素。

问题是，使用我现在的代码，当页面加载时，点击功能可以正常工作。但是，如果我调整浏览器大小并再次单击该元素，它会不止一次触发该状态，有时给人的印象是该功能未被触发。而且，如果我再次调整浏览器的大小，它会比我上次点击更多地触发点击功能。真的很烦人。

为了帮助理解正在发生的事情，我举了一个简单的例子。这是简单的代码(只是为了检查点击功能问题):

HTML:

<ul>
    <li><span class="sub-toggle">Testing 01</span></li>
    <li><span class="sub-toggle">Testing 02</span></li>
    <li><span class="sub-toggle">Testing 03</span></li>
</ul>

CSS:

.sub-toggle{
    display:block;
    padding: 20px;
}

.sub-toggle.active{
    background-color: #ffcc00;
    color: #fff;
}

Javascript (jQuery):

jQuery(function($){

    var i = 1;

    // check if browser size is compatible with click event
    onResize = function() {

        // if browser size is ok, do the click function
        if($(window).width() <= 480){

            // click function
            $('.sub-toggle').click(function(){

                alert('click');

                if($(this).hasClass('active')){
                    alert('active');
                    $(this).removeClass('active');
                } else {
                    $(this).addClass('active');
                }

            });     

        } else{
            // if browser size is greater than expected, unbind the click function
            $('.sub-toggle').removeClass('active').unbind('click');
        }

        // just checking how many times the resize function is triggered 
        console.log('resize: '+ i);
        i++;

    }

    $(document).ready(onResize);

    var timer;

    $(window).bind('resize', function(){
        timer && clearTimeout(timer);
        timer = setTimeout(onResize, 500);
    });

});

(经过编辑删除了一些不必要的代码)

如果您想实际查看它，我制作了一个 Fiddle(尝试调整输出框架的大小以查看它的工作情况):http://jsfiddle.net/C7ppv/1/

也许我遗漏了一些非常愚蠢的东西，因为我对 JavaScript 的了解不多。但是我想做的只是触发一次点击事件，即使多次调整大小也是如此。

我希望我能很好地解释我的问题。我进行了搜索，但没有找到解决此问题的方法(或者我只是不太清楚该寻找什么)。

如有任何帮助，我们将不胜感激!

Answer 1

您的代码当前在每次调用方法 onResize 并且窗口宽度小于或等于 480px 时绑定(bind)一个新的 click 事件.

在绑定(bind)新事件之前，简单地取消绑定(bind) .sub-toggle 元素上的任何现有 click 事件。

$('.sub-toggle').unbind('click').click(function() {
    ...
});

DEMO