>웹 프론트엔드 >JS 튜토리얼 >jQuery 이벤트 바인딩 on() 및 팝업 창 구현 code_jquery

jQuery 이벤트 바인딩 on() 및 팝업 창 구현 code_jquery

WBOY
WBOY원래의
2016-05-16 15:03:071294검색

페이지에 팝업창이 나타나는 경우가 많습니다. 일부 팝업창은 동적으로 생성되고, 일부 팝업창은 페이지 하단에 숨겨지기도 합니다. 팝업 창 이벤트를 모니터링하려면 jQuery 이벤트 바인딩 on() 메서드를 사용할 수 있습니다.

그림과 같이 팝업창은 js에 의해 동적으로 생성됩니다. 팝업창에서 "지금 사용" 링크를 클릭하면 팝업이 닫히는 효과가 있습니다. 창을 띄우고 앵커 포인트로 점프합니다.

태그는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

2bafe229105edf0eb174176bb5049b85지금 사용하기5db79b134e9f6b82c0b36e0489ee08ed

팝업창에서 클릭 이벤트를 모니터링해야 하는데, 팝업창 자체가 동적으로 생성되기 때문에 팝업이 뜨면 본문을 모니터링하고 on() 이벤트를 통해 바인딩해야 합니다. 창이 동적으로 생성되면 클릭 방식을 모니터링할 수 있습니다.

function jump_to_anchor() {
  $("body").on("click", "span[name='msgbox_info'] a, .act-pop-table a", function (e) {
    link = $(this).attr('href');
    if (link == 'http://act.vip.***.com/vip/2016/51dps/#gamelist') {
      e.preventDefault();
      msgExit();
      window.location.href = link;
    }
  });
}

실제로는 두 개의 a 태그를 사용한 이벤트 바인딩입니다. 링크가 특정 URL인 경우 기본 동작이 차단되고 앵커 포인트인 링크로 이동하기 위해 팝업 창 닫기 메서드가 호출됩니다. .

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