jQuery에서 "hover"바인딩을 해제하려면 어떻게합니까?

jQuery에서 "hover"를 어떻게 해제합니까?

작동하지 않습니다.

$(this).unbind('hover');

$(this).unbind('mouseenter').unbind('mouseleave')

또는 더 간결하게 ( @Chad Grant에게 감사드립니다 ) :

$(this).unbind('mouseenter mouseleave')

실제로 jQuery 문서 는 위에 표시된 연결 예제보다 더 간단한 접근 방식을 가지고 있습니다 (물론 잘 작동하지만).

$("#myElement").unbind('mouseenter mouseleave');

jQuery 1.7부터 $.on()및 $.off()이벤트 바인딩 에도 사용할 수 있으므로 hover 이벤트의 바인딩을 해제하려면 더 간단하고 깔끔한 방법을 사용합니다.

$('#myElement').off('hover');

의사 이벤트 이름 "hover" 는 "mouseenter mouseleave" 의 약어로 사용 되지만 이전 jQuery 버전에서는 다르게 처리되었습니다. 각 리터럴 이벤트 이름을 명시 적으로 제거해야합니다. 사용$.off() 지금은 같은 속기를 사용하여 두 마우스 이벤트를 제거 할 수 있습니다.

2016 년 수정 :

여전히 인기있는 질문이므로 jQuery 1.9+에서 "hover"이벤트가 표준 "mouseenter mouseleave"호출에 찬성하여 더 이상 사용되지 않는다는 아래 주석의 @ Dennis98 의 요점에 주목할 가치 가 있습니다. 따라서 이벤트 바인딩 선언은 다음과 같아야합니다.

$('#myElement').off('mouseenter mouseleave');

바인딩 해제 mouseenter및 mouseleave요소 (들)에 이벤트가 개별적으로 또는 바인딩 해제 모든 이벤트.

$(this).unbind('mouseenter').unbind('mouseleave');

또는

$(this).unbind();  // assuming you have no other handlers you want to keep

unbind ()는 하드 코딩 된 인라인 이벤트에서 작동하지 않습니다.

예를 들어에서 mouseover 이벤트를 바인딩 해제하려는 경우 이를 달성하는 빠르고 더러운 방법 <div id="some_div" onmouseover="do_something();">이라는 것을 알았 $('#some_div').attr('onmouseover','')습니다.

또 다른 해결책은 .die ()를 부착하는 것이 이벤트를 .live () .

전의.:

// attach click event for <a> tags
$('a').live('click', function(){});

// deattach click event from <a> tags
$('a').die('click');

여기에서 좋은 참고 문헌을 찾을 수 있습니다 : jQuery .live () 및 .die () 탐색

(내 영어 죄송합니다 : ">)

모든 hover는이면에서 수행되는 작업은 mouseover 및 mouseout 속성에 바인딩됩니다. 해당 이벤트에서 개별적으로 기능을 바인딩 및 바인딩 해제합니다.

예를 들어 다음 html이 있다고 가정합니다.

<a href="#" class="myLink">Link</a>

그러면 jQuery는 다음과 같습니다.

$(document).ready(function() {

  function mouseOver()
  {
    $(this).css('color', 'red');
  }
  function mouseOut()
  {
    $(this).css('color', 'blue');
  }

  // either of these might work
  $('.myLink').hover(mouseOver, mouseOut); 
  $('.myLink').mouseover(mouseOver).mouseout(mouseOut); 
  // otherwise use this
  $('.myLink').bind('mouseover', mouseOver).bind('mouseout', mouseOut);


  // then to unbind
  $('.myLink').click(function(e) {
    e.preventDefault();
    $('.myLink').unbind('mouseover', mouseOver).unbind('mouseout', mouseOut);
  });

});

다음을 on사용하여 에 의해 첨부 된 특정 이벤트 핸들러를 제거 할 수 있습니다.off

$("#ID").on ("eventName", additionalCss, handlerFunction);

// to remove the specific handler
$("#ID").off ("eventName", additionalCss, handlerFunction);

이를 사용하면 handlerFunction 만 제거됩니다.
또 다른 좋은 방법은 여러 연결된 이벤트에 대한 네임 스페이스를 설정하는 것입니다.

$("#ID").on ("eventName1.nameSpace", additionalCss, handlerFunction1);
$("#ID").on ("eventName2.nameSpace", additionalCss, handlerFunction2);
// ...
$("#ID").on ("eventNameN.nameSpace", additionalCss, handlerFunctionN);

// and to remove handlerFunction from 1 to N, just use this
$("#ID").off(".nameSpace");

나는 이것이 .hover ()에 대한 두 번째 인수 (함수)로 작동한다는 것을 알았습니다.

$('#yourId').hover(
    function(){
        // Your code goes here
    },
    function(){
        $(this).unbind()
    }
});

첫 번째 함수 (.hover ()에 대한 인수)는 mouseover이며 코드를 실행합니다. 두 번째 인수는 #yourId에서 hover 이벤트의 바인딩을 해제하는 mouseout입니다. 코드는 한 번만 실행됩니다.