dom 트리 변경 후 jQuery 이벤트

mouseover 및 mouseout과 같은 jQuery 이벤트를 사용하고 있습니다.dom 트리 변경 후 jQuery 이벤트

사용자가 대상 요소에서 마우스 오버를 시작하면이 요소는 removeClass 및 addClass를 사용하여 새 클래스를 수신합니다.

그런 다음 마우스가 꺼지면 mouseout이 발생하지만 class를 변경했기 때문에 mouseout 이벤트가있는 요소의 선택기가 더 이상 일치하지 않습니다.

예 :

$('span.project_unsel').mouseover(function() { 
    $(this).removeClass('project_unsel'); 
    $(this).addClass('project_sel'); 
});

위의 이벤트를 트리거 한 후, 클래스가 변경되었습니다 다음과 같은 해고되지 않습니다.

$('span.project_sel').mouseout(function() { 
    $(this).removeClass('project_sel'); 
    $(this).addClass('project_unsel'); 
});

어떻게 jQuery에 다시 "업데이트"또는 "바인딩"할 수 있습니까?

감사합니다.

출처

2010-11-18 oimoim

왜 ID로 선택 하시겠습니까 (아니면 적어도 변경하려는 클래스 이름이 아닌지)? 그런 다음 클래스를 제거 하시겠습니까? – m4tt1mus

이 중 상당수가 있기 때문에 "id"가 고유해야합니다. – oimoim

하지만 당신 말이 맞아요, 나는 그들을 선택하는 "빈"클래스를 사용해야합니다 – oimoim

내가 대신이 같은 일을 제안에 상황이 덜 복잡하게 :

입니다

$('span.project').hover(function() { 
    $(this).addClass('selected'); 
}, function() { 
    $(this).removeClass('selected'); 
});

, 클래스 .project을 가진 요소에 .hover을 결합, 간단하게 추가 할 때 mouseenter합니다 (.selected 클래스를 제거 첫 번째 인수) 및 mouseleave (두 번째 인수) 이벤트가 트리거됩니다.

.hover을 살펴보십시오.

출처

2010-11-18 23:12:20 karim79

이 문제를 해결할 수있는 방법이 많이 있지만 코드 변경을 최소화하려는 경우 변경하지 않는 대상 요소에 다른 클래스를 추가 한 다음 바인딩하면됩니다. 당신이 어떤 이유로 추가 클래스를 추가 할 수없는 경우

,이 시도 : 당신은/제거가 우아하다 추가 느끼는 경우

$('span.project_sel,span.project_unsel').mouseout(function() { 
    $(this).removeClass('project_sel').addClass('project_unsel'); 
}).mouseover(function() { 
    $(this).removeClass('project_unsel').addClass('project_sel'); 
});

또한 toggleClass()을 살펴 수 있습니다.

편집 : 카림의 호버 솔루션은 마우스 출력/마우스 오버를 통해 수행하는 것보다 낫습니다.

출처

2010-11-18 23:12:47

dom 트리 변경 후 jQuery 이벤트

답변

관련 문제