javascript - jQuery 取消委托(delegate)不起作用

Question

我正在创建一个响应式模板，我想在调整屏幕大小时或小于指定宽度时删除元素上的监听器。
想象一个菜单，当您将鼠标悬停在它的项目上时，它会在正常显示中向您显示子菜单，但移动设备中的相同菜单只会通过点击或点击项目来显示子菜单。

我无法使取消委托(delegate)工作。在调整大小的屏幕中，我仍然有 mouseover 和 mouseout 事件监听器。我在控制台中没有收到任何错误，我都试过了:

• .off('mouseover', 'li')
• .off('鼠标悬停')
• .undelegate('li', 'mouseover')
• .undelegate('li')

它们都不起作用。

var $window = $(window);
    function handleSidenav() {
    $(".nav-list").delegate('li', 'mouseover', function(e) {
        $(this).find("a").addClass('active');
        $(this).find("div.sub-items").toggle();
    }).delegate('li', 'mouseout', function(e) {
        $(this).find('a').removeClass('active');
        $(this).find("div.sub-items").toggle();
    });
}

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize < 767) {
        smallScreenDelegation();
    } else {
        SmallScreenUndelegation();
    }
}
checkWidth();
handleSidenav();
$window.resize(checkWidth());

function smallScreenDelegation() {
    $(".nav-list").undelegate('li'); //It's not working
    $(".nav-list").undelegate('li'); //It's not working
    $(".nav-list").delegate('li a:first', 'click', function(event) {
        if ($(this).next().is(':hidden')) {
            $(this).addClass('active');
            $(this).next().slideDown('slow');
        } else {
            $(this).removeClass('active').next().slideUp('slow');
        }               
        event.preventDefault(); 
    });
}

Answer 1

您需要将 window 包装在 jQuery 对象中。我不确定你是否设置了 $window = $(window)，但这里似乎 $window.width() 和 $window.resize(checkWidth) 缺少括号。一旦我将它们更改为 $(window)，我就能让它正常工作。您必须定义要取消委托(delegate)的事件。我用过:

 $('.nav-list').undelegate('li', 'mouseover');

打开控制台，您可以看到它有效:http://jsbin.com/efonut/6/edit

此外，与 .delegate() 和 .undelegate() 相比，使用 .on() 和 off() 确实是最好的选择，但至少这是有效的...