jquery - jquery中删除事件的die函数

Question

我创建了一个 mouseover 事件处理程序，如下所示:

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').live('mouseover',function(){
    var localGrpName=$(this).attr('class')=='grpName_tooltip0'?arrGrpNames[0]:$(this).attr('class')=='grpName_tooltip1'?arrGrpNames[1]:$(this).attr('class')=='grpName_tooltip2'?arrGrpNames[2]:'';
    $('#GroupsDivTooltip').html(localGrpName);
    $('.ttpGrp').css({'top':$(this).offset().top+27,'left':$(this).offset().left}).fadeIn();
}).live('mouseleave',function(){
    $('#GroupsDivTooltip').html('');
    $('.ttpGrp').fadeOut();
});

我想为特定的 .grpName_tooltip0 类名执行 .die。

当我像下面这样单独尝试时不起作用......

$('.grpName_tooltip0').die('mouseover');

它适用于所有提到的......如下所示

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').die('mouseover');

我只想一个。

请推荐我......

Answer 1

首先:自 jQuery 1.7 起，.live() 和 .die() 已被弃用。您应该使用 .on()现在(但出现了同样的问题，所以这里的所有解决方案仍然有效)。

<小时/>

如果您不必使用事件委托(delegate)，则只需取消绑定(bind)事件处理程序 like @Raminson showed .

如果必须使用事件委托(delegate)，一种方法是直接向元素添加额外的事件处理程序，这可以防止事件在 DOM 中冒泡并触发根 ( like @Farhad showed ) 处的事件处理程序。

另一种解决方法可能是在元素上设置一个标志，并且仅在该标志不是时才执行事件处理程序，例如 false:

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').live('mouseover',function(){
    if($(this).data('active') !== false) {
        // do something
    }
});

然后，您可以通过设置启用和禁用元素的事件处理程序

$('.grpName_tooltip0').data('active', false); // or true

<小时/>

所有上述方法都有一个缺点，即为了防止事件处理程序触发，该元素在您做出决定时必须存在。但您的情况可能并非如此。

因此，另一种方法可能是保留要从事件处理程序中排除的选择器列表:

var exclude = [];

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').live('mouseover',function(){
    var run = true, $self = $(this);
    $.each(exclude, function(sel) {
        if($self.is(sel)) {
            run = false;
            return false;
        }
    });

    if(run) {
        // do stuff
    }
});

然后您所要做的就是将您不希望处理程序触发的选择器添加到列表中:

exclude.push('.grpName_tooltip0');

这种方法可以通过多种方式进行优化(例如，使用对象而不是数组进行 O(1) 访问)，具体取决于您的实际情况。

另一种方法是完全解除事件处理程序的绑定(bind)，只为您想要的元素重新绑定(bind)它:

function handler() {
    // your event handler code here
}

var selectors = ['.grpName_tooltip0', '.grpName_tooltip1', '.grpName_tooltip2'];

$(selectors.join()).live('mouseover', handler);

稍后:

$(selectors.join()).die('mouseover');
$($.grep(selectors, function(sel) {
    return sel !==  '.grpName_tooltip0';
}).join()).live('mouseover', handler);