How to bind fancybox to dynamic added element?

Question

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.

Answer 1

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