programing

jquery live hover

telebox 2023. 10. 4. 21:14
반응형

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
  }
});

http://api.jquery.com/live/

.live()jQuery 1.7 기준으로 감가상각되었습니다.

사용하다.on()대신 하위 선택기를 지정합니다.

http://api.jquery.com/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

반응형