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事件冒泡，其評估是否造成事件的元素選擇正確的匹配現在，並執行，如果是這樣的話...所以如果你改變類將問題，有意義嗎？