[JQUERY] 어떻게 동적 추가 요소에 fancybox를 바인딩?

어떻게 동적 추가 요소에 fancybox를 바인딩?

해결법

1. ---

   1.동적으로 추가 요소에 바인드 fancybox (v1.3.x)에 가장 쉬운 방법은 다음과 같습니다

   동적으로 추가 요소에 바인드 fancybox (v1.3.x)에 가장 쉬운 방법은 다음과 같습니다

   1 : (당신이 아직하지 않은 경우)의 jQuery v1.7.x로 업그레이드

   2 : () +를 focusIn 이벤트에 jQuery를 API를 사용하여 스크립트를 설정합니다.

   가지고, 당신이 클래스 = 당신의 위의 코드 (또는 당신이 그것을 필요로하는 부모의 부모)에 따라 "ajaxFancyBox"와 요소의 부모 요소를 찾을 필요가 작동하고, 예를 들면 그래서 그것을 ()에 jQuery를 연결하려면 이 HTML :

   <div id="container">
    <a class="ajaxFancyBox" href="image01.jpg">open image 01</a>
    <a class="ajaxFancyBox" href="image02.jpg">open image 02</a>
   </div>
   

   .. 우리는 (ON시) 것 같은 예에서 ID = "컨테이너"(상위)와 소자 이벤트하는 focusIn 같은 전술 :

   $("#container").on("focusin", function(){
    $("a.ajaxFancyBox").fancybox({
     // fancybox API options here
     'padding': 0
    }); // fancybox
   }); // on
   

   당신이 필요로하는 당신은 어떤 fancybox 옵션을 적용 할 수 있습니다. 또한 당신은 같은합니다 (() 메소드 내부)의 콘텐츠의 다른 유형에 대해 서로 다른 스크립트가있을 수 있습니다 :

   $("#container").on("focusin", function(){
    $("a.ajaxFancyBox").fancybox({
     // fancybox API options here
     'padding': 0
    }); // fancybox
    $("a.iframeFancyBox").fancybox({
     // fancybox API options here
     'padding': 0,
     'width': 640,
     'height': 320,
     'type': 'iframe'
    }); // fancybox
   }); // on
   

   중요 : 위의 예는 크롬에 그런 식으로 작동하지 않습니다. 해결 방법은 같은 fancybox에 모든 요소를 ​​결합 tabindex 속성을 추가하는 것입니다

   <div id="container">
    <a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a>
    <a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a>
   </div>
   

   이 해결할 수있는 문제 문제와 (내가 아는까지로) IE7 + 등 대부분의 브라우저에서 작동합니다.

   여기 내 데모 페이지를 참조하십시오

   UPDATE : 2012년 3월 7일.

   난 당신이 페이지에 새로운 내용을 추가 할 때하지만 당신은 페이지의 콘텐츠를 교체하지 않을 경우이 방법은 작동 들었다.

   두 시나리오는 위에서 언급 한 방법은 실제로 하나에 작동합니다. 그냥 당신이 CSTE 연구진 () 메소드를 적용 곳에 새로운 대체 내용이 또한 용기 내부에 장착되어 있는지 확인합니다.

   데모보기

   크롬 용의 tabindex 해결 방법도 적용된다.

2. ---

   2.당신은 잘못된 클래스 이름을 지정하고, 대신이 시도 :

   당신은 잘못된 클래스 이름을 지정하고, 대신이 시도 :

   $(".fancybox").fancybox({padding: 0});
   

3. ---

   3.이 아마도 뭔가를 시도 할 수 있습니다 :

   이 아마도 뭔가를 시도 할 수 있습니다 :

    $(document.body).append("<a href='home/index' class='fancybox' onclick='showFancybox()'/>");
   

   그리고 Fancybox를 생성하고 표시하는 기능을합니다

   function showFancybox(){
       $.fancybox(
               '<h2>Hi!</h2><p>Content of popup</p>',
               {
                       'autoDimensions'    : false,
                   'width'             : 350,
                   'height'            : 'auto',
                   'transitionIn'      : 'none',
                   'transitionOut'     : 'none'
               }
           );
   }
   

4. ---

   4.위의 의견에 제안, 우리는 문제 (동적 요소에 바인딩 요소) 이런 종류의 접근 방법을 다음 사용할 수 있습니다 -

   위의 의견에 제안, 우리는 문제 (동적 요소에 바인딩 요소) 이런 종류의 접근 방법을 다음 사용할 수 있습니다 -

   $("#container").on("focusin", function(){
   
       if($(this).hasClass("fancybox-bind")){                //check if custom class exist 
          return 0;                                          //now fancybox event will not be binded
       }else{                                                //add class to container
           $(this).addClass("fancybox-bind");
       }
   
       $("a.ajaxFancyBox").fancybox({                        // fancybox API options here
           'padding': 0
       }); // fancybox
   
      $("a.iframeFancyBox").fancybox({                       // fancybox API options here
        'padding': 0,
        'width': 640,
        'height': 320,
        'type': 'iframe'
      }); // fancybox
   }); // on
   

5. ---

   5.이 같은 동일한 질문 당신이에서 답을 찾을 수 있습니다 대답

   이 같은 동일한 질문 당신이에서 답을 찾을 수 있습니다 대답

   jQuery를 사용하여 동적으로 생성 된 HTML을 추가하면 Fancybox 잘 재생되지 않습니다

from https://stackoverflow.com/questions/9081571/how-to-bind-fancybox-to-dynamic-added-element by cc-by-sa and MIT license