Question

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

我无法使下层工作。在调整大小的屏幕中，我仍然有mouseover和mouseout事件侦听器。我在控制台中没有出现任何错误，我已经尝试了两种错误：

.off('mouseover', 'li')
.off('mouseover')
.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

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

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

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

此外，最好使用.on（）和off（）vs .delegate（）和.undelegate（），但至少这个有效......

Answer 2

我仍然不知道undelegate出了什么问题我无法解决问题，但我设法使用on和off修复了我的代码。

作为adeneo said我在每个窗口调整大小时委托和取消授权，这是一个安静的错误，我想我已经解决了这个问题，但在device变量上保留了最后一个状态。

var $window = $(window);
var device;

function desktopSidenav() {
    $(".nav-list > li").off('click');
    $(".nav-list > li").on('mouseover', function(e) {
        $(this).find("a").addClass('active');
        $(this).find("div.sub-items").toggle();
    }).on('mouseout', function(e) {
        $(this).find('a').removeClass('active');
        $(this).find("div.sub-items").toggle();
    });
}

function handheldSidenav() {
    $(".nav-list > li").off('mouseover').off('mouseout');
    $(".nav-list > li").on('click', function(e) {
        if ($(this).find("div.sub-items").is(':hidden')) {
            $(this).find("a:first").addClass('active').next().slideDown('slow');
        } else {
            $(this).find("a:first").removeClass('active').next().slideUp('slow');
        }               
        e.preventDefault(); 
    });
}

现在我在做其他任何操作之前检查窗口大小，我会在device变量中保存设备类型。如果窗口调整大小，我将检查设备状态并根据设备类型执行操作。

if ($window.width() > 767) {
    device = 'desktop';
    desktopSidenav();
} else {
    device = 'handheld';
    handheldSidenav();
}
$window.resize(function() {
    if ($window.width() > 767) {
        if (device == 'handheld') {
            device = 'desktop';
            desktopSidenav();
        }
    } else {
        if (device == 'desktop') {
            device = 'handheld';
            handheldSidenav();
        }
    }
});

如果我使用delegate和undelegate代替on和off，代码将无效，我仍然不知道为什么，所以这不可能算作一个真正的答案，但我想告诉每个有类似问题的人使用jQuery的on和off代替delegate。

jQuery Undelegate不起作用

2 个答案: