16

I use jquery fancybox 1.3.4 as pop form.

but I found fancybox can't bind to element dynamic added. for example when I add a html element to current document.

like this: first I append a element to body use jquery,

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

and I call fancybox,

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

but fancybox don't work with dynamic added element.

and I can't call fancybox from this element?

Cœur
  • 37,241
  • 25
  • 195
  • 267
caochao
  • 193
  • 1
  • 1
  • 8
  • I answered the question look this http://stackoverflow.com/questions/3574100/appending-dynamically-generated-html-using-jquery-does-not-play-well-with-fancyb – Ankit Jun 20 '13 at 11:51

5 Answers5

30

The easiest way to bind fancybox (v1.3.x) to dynamically added elements is:

1: Upgrade to jQuery v1.7.x (if you haven't yet)

2: Set your script using jQuery API on() + the focusin event.

To make it work you need to find the parent element of your elements with class="ajaxFancyBox" as per your code above (or the parent of the parent as you need it) and attach jQuery on() to it so for example, having this 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>

.. we will apply on() and focusin event to the element with id="container" (the parent) as in the example above, like:

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

You can apply any fancybox option as you need. Additionally you may have different scripts for different type of content (inside the on() method) like:

$("#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

IMPORTANT: the example above won't work like that on Chrome. The workaround is to add the tabindex attribute to all of your elements bound to fancybox like

<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>

that solves the issue and will work (as far as I know) in most browsers including IE7+.

See my demo page here

UPDATE: March 07, 2012.

I was told that this method only works when you add new content to the page but not when you replace the content of the page.

The method actually works on either of the two scenarios mentioned above. Just make sure that the new replacing content is also loaded inside the container where you applied the .on() method.

See demo

The tabindex workaround for Chrome also applies.

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Is it good to keep on binding fancybox event when its already binded on first focusin ? – Dr_Dang Oct 31 '14 at 08:13
  • @Dr_Dang : that is a good question and I agree it would make sense not to keep binding fancybox over and over again. However, bear in mind that we may not have control what elements were recently (and dynamically) added to the DOM. Validating what elements are bound and what others are not would be very daunting so this method solves that situation altogether. This answer is already old and it's for an old version of fancybox (v2.x doesn't have that issue) I don't think this is against best practices since event delegation sometimes is the only way to go. – JFK Oct 31 '14 at 16:39
  • Thanks JFK.... for info about fancybox 2.0 But I think we can have better solution for above solution. sol 1 : if we add custom class after binding fancybox event and next time check for custom class first. – Dr_Dang Nov 02 '14 at 16:33
  • @Dr_Dang : you are always very welcome to post your own answer if you consider it proposes a better solution. Don't forget to provide well documented code and (if possible) a demo people can refer to ;) – JFK Nov 02 '14 at 17:57
1

You're specifying the wrong class name, try this instead:

$(".fancybox").fancybox({padding: 0});
Russ Ferri
  • 6,459
  • 2
  • 22
  • 24
1

You could try something like this maybe:

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

And then make a function to create and show Fancybox:

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

As suggested in above comment , we can use following approach in this kind of problems ( binding element to dynamic elements ) -

$("#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
Dr_Dang
  • 452
  • 6
  • 15
-1

I answered the question same like this you can find the answer at

Appending dynamically generated html using jQuery does not play well with Fancybox

Community
  • 1
  • 1
Ankit
  • 760
  • 6
  • 15