javascript - jQuery Undelegate不起作用

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

我无法撤消删除工作。在调整大小的屏幕中，我仍然具有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();
    });
}

最佳答案

您需要将窗口包装在jQuery对象中。我不确定是否设置$ window = $（window），但是在这里似乎$ window.width（）和$ window.resize（checkWidth）缺少括号。将其更改为$（window）后，我就能使其正常运行。您必须定义要取消删除的事件。我用了：

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

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

另外，最好使用.on（）和off（）以及.delegate（）和.undelegate（），但是至少这可以...

关于javascript - jQuery Undelegate不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16266581/