title: jQuery doesn't work after content is loaded via AJAX
body: <p>On <a href="http://quickerbook.imobisoft.eu/HotelSearch/RegionHotelList.aspx?SearchFlag=region&amp;RegionID=1&amp;id=1&amp;SpecificDateFlag=0&amp;CheckInDate=17-04-2013&amp;CheckOutDate=18-04-2013&amp;NoofRooms=1&amp;NoofAdults=2&amp;NoofChildren=0&amp;BookingFlag=room">this page</a> I have a jQuery popup window and thumbnail resizable images. If I mouse over on the thumbnails, the images are resizing perfectly. Also, when I click on the big yellow TV button "QuickBook TV" in the footer, the popup appears perfectly as I want it to.</p>
  
  <p>However, when I click on the "Next" or "Prev" buttons, AJAX is used to load the new content and my jQuery no longer functions for the popup or thumbnail images. I have searched a number of forums looking for information on this issue, but due to having limited knowledge of jQuery I've been unable to understand what I need to do.</p>
  
  <p><strong>Following is the popup jQuery</strong></p>
  
  <pre><code>$(document).ready(function() {
  
          $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" });
          $(".inline").colorbox({ inline: true, width: "50%" });
          $(".callbacks").colorbox({
              onOpen: function() { alert('onOpen: colorbox is about to open'); },
              onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); },
              onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); },
              onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); },
              onClosed: function() { alert('onClosed: colorbox has completely closed'); }
          });
  
          //Example of preserving a JavaScript event for inline calls.
          $("#click").click(function() {
              $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
              return false;
          });
      });
  </code></pre>
  
  <p><strong>And this is the thumbnails jQuery</strong></p>
  
  <pre><code>$(function() {
  
  var xwidth = ($('.image-popout img').width())/1;
  var xheight = ($('.image-popout img').height())/1;
  
  $('.image-popout img').css(
          {'width': xwidth, 'height': xheight}
  ); //By default set the width and height of the image.
  
  $('.image-popout img').parent().css(
          {'width': xwidth, 'height': xheight}
  );
  
  $('.image-popout img').hover(
      function() {
          $(this).stop().animate( {
              width   : xwidth * 3,
              height  : xheight * 3,
              margin : -(xwidth/3)
              }, 200
          ); //END FUNCTION
  
          $(this).addClass('image-popout-shadow');
  
      }, //END HOVER IN
      function() {
          $(this).stop().animate( {
              width   : xwidth,
              height  : xheight,
              margin : 0
              }, 200, function() {
                  $(this).removeClass('image-popout-shadow');
      }); //END FUNCTION
  
      }
  );
  
  });
  </code></pre>