>웹 프론트엔드 >JS 튜토리얼 >jQuery에서 Visible Div에 대한 이벤트를 트리거하는 방법은 무엇입니까?

jQuery에서 Visible Div에 대한 이벤트를 트리거하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-31 10:30:02658검색

How to Trigger Events for Visible Divs in jQuery?

jQuery를 사용하여 표시되는 div에 대한 이벤트 트리거

jQuery에서는 "isvisible" 이벤트 핸들러를 연결하여 div 요소의 표시 여부를 모니터링하고 특정 작업을 트리거할 수 있습니다.

제공된 의사 코드는 다음과 같이 구현할 수 있습니다.

<code class="js">$(function () {
  $('#contentDiv').on('isVisible', function () {
    alert("do something");
  });
});</code>

이 코드는 div가 표시될 때 경고 기능을 실행하는 #contentDiv div에 이벤트 핸들러를 할당합니다. .

jQuery 확장 접근 방식:

또는 .show() 메서드를 확장하여 div가 표시되기 전후에 이벤트를 트리거할 수 있습니다.

확장:

<code class="js">jQuery(function ($) {
  var _oldShow = $.fn.show;

  $.fn.show = function (speed, oldCallback) {
    return $(this).each(function () {
      var obj = $(this);
      var newCallback = function () {
        if ($.isFunction(oldCallback)) {
          oldCallback.apply(obj);
        }
        obj.trigger('afterShow');
      };

      obj.trigger('beforeShow');
      _oldShow.apply(obj, [speed, newCallback]);
    });
  };
});</code>

사용:

<code class="js">$('#test')
  .on('beforeShow', function () {
    alert('beforeShow');
  })
  .on('afterShow', function () {
    alert('afterShow');
  })
  .show(1000, function () {
    alert('in show callback');
  })
  .show();</code>

이 접근 방식을 사용하면 div가 표시되기 전후에 이벤트를 트리거할 수 있습니다. 원래 .show() 메소드의 동작을 유지하면서

위 내용은 jQuery에서 Visible Div에 대한 이벤트를 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.