Question

我有一个标签视图，当我将鼠标悬停在未选中的标签上方时，我会给它提供与所选标签相同的样式。问题是，当我点击它时，我似乎无法取消绑定进入和离开事件。

function DocReady() {
    $("." + TAB_OFF_CLASS).click(changeCategory);
    $("." + TAB_OFF_CLASS).mouseenter(onCategoryOver);
    $("." + TAB_OFF_CLASS).mouseleave(onCategoryOut);
}

function onCategoryOver() {
    $(this).removeClass(TAB_OFF_CLASS).addClass(TAB_ON_CLASS);
}
function onCategoryOut() {
    $(this).removeClass(TAB_ON_CLASS).addClass(TAB_OFF_CLASS);
}

function changeCategory() {

var catTab = $(this);
var catName = catTab.find('#catName').html();
var id = catTab.attr('categoryID');
catTab.unbind('click');
catTab.unbind('mouseenter', onCategoryOver);
catTab.unbind('mouseleave', onCategoryOut);
catTab.removeClass(TAB_OFF_CLASS).addClass(TAB_ON_CLASS);    
...

}

你可以看到我也尝试将它再次绑定到一个空函数也不起作用。更新：unbind仅在我单击选项卡并保持不变直到代码完成时才起作用。但如果我点击并拉出它不会。我想这是因为mouseleave事件在点击处理程序的中间触发。任何人...

Answer 1

调用

catTab.mouseenter(function(){});
catTab.mouseleave(function(){});

将简单地添加另一个空事件处理程序。你应该像这样取消绑定它们;

catTab.unbind("mouseenter");
catTab.unbind("mouseleave");

Answer 2

使用空函数不起作用。使用jQuery，您可以根据需要为特定事件添加任意数量的处理程序。添加新的不会删除前一个。正确的方法是使用unbind方法，就像你在注释掉的代码中一样。

正如我所看到的，这段代码应该可行。我建议使用Firebug来查看是否实际调用了此代码。

Answer 3

调用unbind()时必须添加回调函数。

catTab.unBind('click', clickEventHandler);

当您第一次附加此事件处理程序时，请不要使用这样的匿名函数：

catTab.click(function () {
   ...
});

// or 

catTab.bind('click', function () {
    ...
});

而是使用命名函数

function clickEventHandler() {
    ...
};

catTab.click(clickEventHandler);
// or
catTab.bind('click', clickEventHandler);

jquery：unbind mouseenter并且离开将无效

3 个答案: