losing original variable reference on second click

Newbie :)

I am trying to create a picture w/ description portfolio. It works fine on the first click of thumbnail for description, but the second click, the description is nowhere to be found on the page. Its almost like it uses the description once then, throws it away. How do I ensure this doesn't happen? To put description back in its original place in the html, or some other way? Trying to keep this simple but keeps getting more complicated. This is why designers outsource lol.

testpage:http://www.tsmillie.com/portfolio2.html

code:

$(".gallery a:has(img)").click(function() {

    var largePath = $(this).attr("href");
    var image = $(".photo_large");
        image.fadeOut('500', function () {
        image.attr({ src: largePath }) ;
        imag开发者_Python百科e.fadeIn('500');
                      });
    var description = $(this).next(".description").css("display", "inline");
    $(".caption").html(description);
      return false;
          });

Try changing to this:

$(".gallery a:has(img)").click(function() {
    var largePath = $(this).attr("href");
    var image = $(".photo_large");
    image.fadeOut('500', function () {
        image.attr({ src: largePath }) ;
        image.fadeIn('500');
    });
    var description = $(this).next(".description");
    $(".caption").html(description.clone().css("display", "inline")); // <---- Changed
    return false;
});

I think it was moving the description into the caption rather than copying the html which is what I guess you want to do?

It now clones the content and displays that in the caption.

As InfernalBadger says, you're adding the reference to your description element to your .caption element, and when you replace the contents of .caption, you remove the previous description from the DOM