I am trying to figure out why I have to double click or tap to make thumbnails appear.

I am trying to figure out why I have to double click or tap to make thumbnails appear.

I have to tap or click twice for the thumbnails to display. 

Here is my code: 

html code: 

  1. <div id="ThumbNails">
  2. <div id="thumbimg"></div>
  3. <div>

jquery code:

  1.  $("#ThumbNails").bind("click", function (html) {
  2.                 lastShown = CurrentPage;
  3.                 PopulateThumbsEx(BookID, lastShown);
  4.                 //$("#book").fadeOut("fast");
  5.                 $(".ThumbNailNav").fadeIn(500);
  6.                 $("#thumbimg").empty();
  7.                 $("#thumbimg").append(html).prepend(thumbnails);
  8.                 $("#thumbimg").fadeIn(1000);
  9.             });

My ajax code to get the images load them into a array.

  1.    function PopulateThumbsEx(BookID, lastShown) {
  2.             $.ajax({
  3.                 type: "POST", // AJAX type post
  4.                 url: "tabletbook.aspx/GetThumbNailPage",
  5.                 data: '{"BookID": "' + BookID + '",  "lastShown": "' + lastShown + '"}',
  6.                 contentType: "application/json; charset=utf-8", //This is required or you will get all sorts of strange things :-)
  7.                 dataType: "json", //We need to specifiy JSON as to have the AJAX serialize the data between Client and server 
  8.                 success: function (data) { // The msg that comes back has in it the d attribute which in this case contains an array from the server
  9.                     thumbnails = data.d; //Lets copy the thumbnails to a global array.
  10.                 }
  11.             });
  12.         }

It loads the images I just need for a one click or tap for the ipad and desktop.

any suggestion