jQuery dynamic created content

Question

I am always getting error or got stuck when I reach that situation , I am getting images from database using ajax and I want to display them in a fancybox , in the page header I have added all the links to the needed scripts , then I wrote inside my div :

htlmcon += '  <a rel="example_group" href="data:image/png;base64,' + $(this).find("ImageData").text() + '" title="Lorem ipsum dolor sit amet"><img alt="" src="data:image/png;base64,' + $(this).find("ImageData").text() + '" /></a>';

as mentioned in the fancy box documents I have to document ready the following :

$("a.group").fancybox({
    'transitionIn'  :   'elastic',
    'transitionOut' :   'elastic',
    'speedIn'       :   600, 
    'speedOut'      :   200, 
    'overlayShow'   :   false
});

after loading the page and getting the images its showing erorr ( Uncaught TypeError: Object [object Object] has no method 'fancybox')

So I have removed the fancybox function from the document ready and added it to

$.ready.promise().done(function(){

but still not working , also I have tried to call it directly after I got the images , still the same getting the same error Uncaught TypeError: Object [object Object] has no method 'fancybox'

Kindly guide me how to call and where to call it .

Note I have try it in normal page not on dynamic contents it was working .

Regards....

EDIT : I have added this function to the document ready :

  $(document).ready(function () {
          $("#imglist").on("focusin", function () {
              //    /*
              //    *   Examples - images
              //    */


              $("a[rel=example_group]").fancybox({
                  'transitionIn': 'none',
                  'transitionOut': 'none',
                  'titlePosition': 'over',
                  'titlePosition': 'outside',
                  'overlayColor': '#000',
                  'overlayOpacity': 0.9,
                  'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                      return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                  }
              });
          });
});

So the Uncaught TypeError is gone , but the fancybox is not working , but I was thinking maybe it doesnot got inside $("#imglist").on("focusin", function () { ....

Also, these are my references:

<script src="code.jquery.com/jquery-1.9.1.js"></script>;
<script src="code.jquery.com/jquery-migrate-1.1.0.js"></script>; 
<script src="JS/jquery.mobile-1.3.2.min.js"></script> 
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

This error means you haven't loaded fancybox plugin before calling fancybox() method. And please, don't use this syntax: `$.ready.promise().done(function(){...})` — A. Wolff, Dec 16 '13 at 15:37
possible duplicate of [how to bind fancybox to dynamic added element?](http://stackoverflow.com/questions/9081571/how-to-bind-fancybox-to-dynamic-added-element) — JFK, Dec 16 '13 at 17:12
The answer http://stackoverflow.com/a/9084293/1055987 includes demos. Check the source code and compare with yours. Also make sure your references to all the js and css files are correct (see the source and click on every linked file to make sure you don't have 404 errors) — JFK, Dec 16 '13 at 17:15
I am sure from my references , also I am using chrome console for tracing . — Tamer Hatoum, Dec 16 '13 at 19:06

score 0 · Answer 1 · answered Dec 16 '13 at 15:44

Looks like you haven't loaded fancybox.

You can include the following to include it in your web page. (the following loads it from a CDN)

<script src="cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js" type="text/javascript"></script>

jQuery dynamic created content

1 Answers1