동적으로 추가된 요소와 함께 Fancybox를 사용하는 방법은 무엇입니까?

Fancybox를 동적으로 추가된 요소에 바인딩

Fancybox v1.3.4를 문서에 동적으로 추가된 요소와 함께 사용하면 문제가 발생할 수 있습니다. 이는 Fancybox가 정적 요소에만 바인딩되기 때문입니다.

해결책:

1단계: jQuery v1.7.x로 업그레이드

이 버전에는 동적으로 추가된 요소에 이벤트를 바인딩할 수 있는 .on() 메서드가 포함되어 있습니다.

2단계: .on() 및 focusin 이벤트 사용

fancybox 요소의 상위 요소에 .on() 메서드를 바인딩합니다. focusin 이벤트는 Fancybox가 상위 컨테이너의 포커스 내에 있는 요소에만 바인딩되도록 하는 데 사용됩니다.

예를 들어 Fancybox 요소에 "ajaxFancyBox" 클래스가 있고 ID가 "container"인 컨테이너 내에 있는 경우 ":

$("#container").on("focusin", function() {
  $("a.ajaxFancyBox").fancybox({
    // Set your Fancybox options here
  });
});

이 방법은 다양한 콘텐츠 유형에 대해 다양한 Fancybox 옵션 지정도 지원합니다.

$("#container").on("focusin", function() {
  $("a.ajaxFancyBox").fancybox({
    // Ajax options
  });

  $("a.iframeFancyBox").fancybox({
    // Iframe options
  });
});

Chrome에 대한 중요 참고 사항:

Chrome에서는 on() 메서드가 작동하려면 Fancybox에 바인딩된 모든 요소에 tabindex 속성을 추가해야 합니다.

<a tabindex="1" class="ajaxFancyBox" href="image01.jpg">...</a>
<a tabindex="1" class="ajaxFancyBox" href="image02.jpg">...</a>

이 솔루션은 새 콘텐츠를 추가하고 기존 콘텐츠를 바꾸는 데 모두 작동합니다. .on() 메소드가 적용된 컨테이너 내에 새로운 컨텐츠가 추가되었는지 확인하세요.

위 내용은 동적으로 추가된 요소와 함께 Fancybox를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!