如何从函数中删除或取消绑定jQuery Handler

Question

我已经编写了这个功能来触发移动响应导航。我想根据某个浏览器宽度销毁此功能。我不确定如何在我没有使用jQuery bind（）函数绑定的事件上执行此操作。

见下面的例子：

$(function() {

    //update the width value when the browser is resized (useful for devices which switch from portrait to landscape)
    $(window).resize(function(){
        var current_width = $(window).width();
        if(current_width < 400){                    
            $('nav#menu').mmenu();
        }if(current_width > 401){
            $('body').('nav#menu'),mmenu().die();
        }
    });

以下是菜单示例：

<nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#about">About us</a>
            <ul>
                <li><a href="#about/history">History</a></li>
                <li><a href="#about/team">The team</a>
                    <ul>
                        <li><a href="#about/team/management">Management</a></li>
                        <li><a href="#about/team/sales">Sales</a></li>
                        <li><a href="#about/team/development">Development</a></li>
                    </ul>
                </li>
                <li><a href="#about/address">Our address</a></li>
            </ul>
        </li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

Answer 1

关闭触发器将取消绑定您的活动

$(window).resize(function(){
    if($(window).innerWidth() < 400){       
      $('#width').html($(window).innerWidth());            
    }else{
        $(window).off('resize',function(){
            //optional Handler
         });
    }
});

Answer 2

使用jQuery off

$(window).off('resize');

工作示例 jsfiddle

在点击运行之前使输出窗口变小，看它是否正常工作，如下所示：

$(window).resize(function(){
        var current_width = $(window).innerWidth();
        if(current_width < 400){       
          $('#width').html($(window).innerWidth());            
        }else{
            $(window).off('resize')
        }
    });

Answer 3

最好的方法是使用jQuery.off()功能，因为它是新推荐的方式。

您也可以使用.unbind()，它的工作方式相同，但有一天会被弃用（从jQuery v1.7开始）