2010-05-09 3 views
0

jQuery를 사용하여 마우스를 올렸을 때 관련된 클래스에 따라 버튼의 배경 이미지를 변경하고 있습니다. 그러나 hover 문을 별도의 함수에 넣을 때만 작동합니다. 왜 이런거야?jQuery 클래스 selector oddness

여기 NON 작업 코드는 keyup 이벤트를 통해 해당 클래스가 제거 되더라도 항상 .submit hover 문으로 평가됩니다.

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

}); 

    }}); 

근무 코드 :

난 그냥 별도의 기능에 가져가 문을 넣어야 할 이유를 대신 주요 DOM 모두 고집을 참조하지
$(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'); 

}); 
    } }); 

.

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

현재 지금은 아무튼, "사람들에게 호버 기능을 결합, 그 클래스와 요소를 찾아"말하는 :

답변

1

는이 같은 재 배열 코드 .live()를 사용하여 비트를 필요 함수가 이미 해당 요소의 mouseentermouseleave jQuery 이벤트에 바인딩 되었기 때문에 클래스를 변경한다고해도 관계가 없습니다. 클래스가 변경된 경우에도 관련이 없습니다. 이벤트를 일으키는 요소가 선택 권리가 일치하는 경우 그러나 .live()

가, 이벤트 처리기가 요소 자체에 구속되지 않으며,이 거품이 최대에 mouseentermouseleave 이벤트를 기다리고 document에 바인딩 된, 그것은 평가 이제을 실행하고 그 경우 실행합니다. 그러면 클래스를 변경하면 이 될까요?

+0

의미가 있습니다. 그것은 많은 것을 정리했다. 정말 고마워! – x3sphere

+0

@ x3sphere - 환영합니다 :) –