2

I created a mouseover event handler like this:

$('.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();
});

I want to do .die for particular .grpName_tooltip0 class name.

When I tried individually like below is not working...

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

It is working for all mentioned... like below

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

I just want to only for one.

Please suggest me.....

4

3 回答 3

3

第一：自 jQuery 1.7 起已弃用.live()。.die()您现在应该使用.on()（但会出现同样的问题，所以这里的所有解决方案仍然有效）。

如果您不必使用事件委托，您可以简单地使用@Raminson 显示unbind的事件处理程序。

如果您必须使用事件委托，一种方法是直接向元素添加一个额外的事件处理程序，这可以防止事件冒泡 DOM 并在根处触发事件处理程序（如 @Farhad 所示）。

另一种解决方法可能是在元素上设置一个标志，如果标志不是，则仅执行事件处理程序，例如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)访问），具体取决于您的实际情况。

另一种方法是完全取消绑定事件处理程序，只为您想要的元素重新绑定它：

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);
于 2012-04-30T12:28:20.823 回答
2

也许试试这个会更好：

$('.grpName_tooltip0').mouseover(function(){return false;});
于 2012-04-30T12:09:02.937 回答
0

尝试这个：

$('.grpName_tooltip0, .grpName_tooltip1, .grpName_tooltip2').mouseenter(function(){
   ....
   $('.grpName_tooltip0').unbind('mouseenter');
})
于 2012-04-30T12:09:58.177 回答