jQuery类选择器奇怪

Question

我使用jQuery来更改按钮的背景图像，取决于与它关联的类悬停。但是，只有将悬停声明放在单独的函数中才有效。为什么是这样？

下面是非工作代码，即使通过keyup事件删除该类时，它总是评估为.submit悬停语句。

$(function() { 
    { 

$('.submit-getinfo').hover(function() 
{ 
    $(this).css({backgroundPosition: "right bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "right top"}); 
    //$(this).removeClass('submithover'); 

}); 

$('.submit').hover(function() 
{ 
    $(this).css({backgroundPosition: "left bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "left top"}); 
    //$(this).removeClass('submithover'); 

}); 

    }}); 

工作代码：

$(function() { 
    { 


$('.submit').hover(function() 
{ 
    $(this).css({backgroundPosition: "left bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "left top"}); 
    //$(this).removeClass('submithover'); 

}); 
    }}); 

    $('#test').bind('keyup', function() { 

    if (url == 'devel') { 
    $("#submit").addClass("submit-getinfo").removeClass("submit"); 

$('.submit-getinfo').hover(function() 
{ 
    $(this).css({backgroundPosition: "right bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "right top"}); 
//$(this).removeClass('submithover'); 

}); 
    } }); 

我完全感觉不到的，而不是无论是在主DOM坚持，为什么我必须把不同的功能悬停语句。

Answer 1

您需要重新安排你的代码中使用.live()了一下，像这样：

$(function() { 
    $('.submit-getinfo').live('mouseenter', function() { 
     $(this).css({backgroundPosition: "right bottom"}); 
    }).live('mouseleave' function() { 
     $(this).css({backgroundPosition: "right top"}); 
    }); 

    $('.submit').live('mouseenter', function() { 
     $(this).css({backgroundPosition: "left bottom"}); 
    }).live('mouseleave', function() { 
     $(this).css({backgroundPosition: "left top"}); 
    }); 
}); 

目前它在说“找到该类元素，结合这悬停功能的”，现在它不无论你在改变类，因为该函数已经绑定到该元素的mouseenter和mouseleave jQuery事件...即使它是类更改，这是不相关的。

有了然而.live()，该事件处理函数不是绑定到元素本身，它绑定到document，等待mouseenter和mouseleave事件冒泡，其评估是否造成事件的元素选择正确的匹配现在，并执行，如果是这样的话...所以如果你改变类将问题，有意义吗？