jquery live hover
마우스로 맴도는 테이블 행에 대해서만 컨텍스트 삭제 버튼을 표시하기 위해 다음 jquery 코드를 사용하고 있습니다.이것은 효과가 있지만 js/ajax가 추가된 행에는 적용되지 않습니다.
이것을 라이브 이벤트로 만들 수 있는 방법이 있습니까?
$("table tr").hover(
function () {},
function () {}
);
jQuery 1.4.1은 이제 라이브() 이벤트에 대해 "hover"를 지원하지만 이벤트 핸들러 기능은 하나만 있습니다.
$("table tr").live("hover",
function () {
});
또는 마우스 입력용과 마우스 이탈용 두 가지 기능을 제공할 수 있습니다.
$("table tr").live({
mouseenter: function () {
},
mouseleave: function () {
}
});
$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});
.live()
jQuery 1.7 기준으로 감가상각되었습니다.
사용하다.on()
대신 하위 선택기를 지정합니다.
$("table").on({
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
}, "tr"); // descendant selector
jQuery 1.4.1 현재 호버 이벤트는 다음과 같이 작동합니다.live()
. 기본적으로 마우스 엔터 및 마우스 탈퇴 이벤트에만 바인딩되며, 1.4.1 이전 버전에 대해서도 다음과 같이 수행할 수 있습니다.
$("table tr")
.mouseenter(function() {
// Hover starts
})
.mouseleave(function() {
// Hover ends
});
이것은 두 개의 바인딩을 필요로 하지만 동시에 작동합니다.
이 코드는 다음과 같이 작동합니다.
$(".ui-button-text").live(
'hover',
function (ev) {
if (ev.type == 'mouseover') {
$(this).addClass("ui-state-hover");
}
if (ev.type == 'mouseout') {
$(this).removeClass("ui-state-hover");
}
});
경고: 호버의 라이브 버전은 성능에 심각한 영향을 미칩니다.IE8의 큰 페이지에서 특히 눈에 띕니다.
저는 AJAX와 함께 다단계 메뉴를 로드하는 프로젝트를 진행하고 있습니다(우리의 이유는 있습니다 :).어쨌든 나는 크롬에서 잘 작동하는 호버에 라이브 방법을 사용했습니다(IE9은 괜찮았지만, 훌륭하지는 않았습니다).하지만 IE8에서는 메뉴 속도가 느려졌을 뿐만 아니라(떨어지기 전에 몇 초 동안 맴돌아야 함) 스크롤과 간단한 확인란 확인 등 페이지의 모든 것이 고통스러울 정도로 느렸습니다.
이벤트를 로드한 후 바로 바인딩하면 성능이 충분합니다.
$(문서)를 사용해야 합니다.이를 사용하지 않으면 새로 추가된 테이블 행이 제대로 작동하지 않습니다.
$(document)." ""table tr" 이상의 ("mouse에서, 함수(이벤트) {
//단추 표시
});
$(document.("mouse아웃", "table tr", 함수(이벤트){
//단추 숨기기
});
언급URL : https://stackoverflow.com/questions/2262480/jquery-live-hover
'programing' 카테고리의 다른 글
MySQL 저장 프로시저를 저장소에 포함하시겠습니까? (0) | 2023.10.04 |
---|---|
C++ 컴파일러로 사용할 MinGW 파일 (0) | 2023.10.04 |
PDO에서 LIKE 쿼리 구현 (0) | 2023.10.04 |
zip 파일 생성/추출 및 기존 파일/내용 덮어쓰기 (0) | 2023.09.24 |
Android용 모바일 웹 사이트(응용프로그램 아님)에서 WhatsApp의 공유 링크 (0) | 2023.09.24 |