title: jQuery FancyBox not working after altering DOM
body: <p>We are using <a href="http://fancybox.net/home" rel="nofollow">Fancybox</a> to provide a lightbox for our image gallery.</p>
  
  <p>We have a ul with class 'images'.  Each list item contains an anchor tag and an image inside of it.  The anchor tag contains an href of the full sized image.</p>
  
  <p>This code is used to set up the lightbox.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
      $(document).ready(function () {
          if (!themeJSEnabled) {
              $(".images a").fancybox({
                  'transitionIn': 'elastic',
                  'transitionOut': 'elastic',
                  'titlePosition': 'inside',
                  'autoScale': true,
                  'centerOnScroll': true,
                  'overlayOpacity': .95,
                  'titleFromAlt': true,
                  'scrolling': 'no'
              });
          }
      });
  //]]&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>This works fine for most of our private labels, but one particular style doesn't work.</p>
  
  <p>The style that doesn't work uses javascript to rip apart part of the DOM and reconstruct it (as follows)</p>
  
  <pre><code> $("#subcontent2").before("&lt;div class='combinedContentWrapper'&gt;&lt;/div&gt;");
   $("div.combinedContentWrapper").append("&lt;div class='combinedContent'&gt;&lt;/div&gt;");
   $("div.combinedContent").append("&lt;div class='sc1'&gt;&lt;/div&gt;");
   $("div.combinedContent").append("&lt;div class='mc'&gt;&lt;/div&gt;");
   $("div.mc").append($(".maincontent").html());
   $("div.sc1").append($(".subcontent1").html());
   $("div.maincontent").remove();
   $("div.subcontent1").remove();
   $("div.mc").addClass("maincontent");
   $("div.sc1").addClass("subcontent1");
  </code></pre>
  
  <p>In themes of this style themeJSEnabled (from the first code block) is true, so AFTER the DOM is reconstructed with the above code, I use the following code to register the Fancybox:</p>
  
  <pre><code> $(".images a").fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'titlePosition': 'inside',
        'autoScale': true,
        'centerOnScroll': true,
        'overlayOpacity': .95,
        'titleFromAlt': true,
        'scrolling': 'no'
    });
  </code></pre>
  
  <p>As I understand it, this should work, as I didn't register anything before the DOM was reconstructed, and the fancybox should be registering on the new elements.</p>
  
  <p>However, when I first click any image in the list, it throws a javascript error - 't is undefined'.  This error is listed as being on line 17, within a completely unrelated method.  The error still occurs even if that method is surrounded by a try/catch block.  The error does NOT occur on subsequent clicks on images, which product no result.</p>
  
  <p>What can I do to get the Fancybox to work in this situation?</p>
  
  <p>You can see an example live on our test server at <a href="http://paradise.test.mem.com/ContentDisplay.aspx?ID=33375747" rel="nofollow">this link</a>.  Click on 'Images', then click an image.</p>