How do you create link using click function, to display a subcontents made up of jQuery?

HTML:

<div id="mainContent">
    <div class="photoShow"></div>
    <div class="photo_nav"></div>
</div>

<div class="photo_panels">
    <div class="photo_panel">
        <div class="photo_content"></div>
    </div>
    <div class="photo_panel">
        <div class="photo_content"></div>
    </div>
    <div class="photo_panel">
        <div class="photo_content"></div>
    </div>
</div>

JavaS开发者_如何转开发cript/jQuery:

To create three links to display "photo_content" which has DOM element and a photo referenced:

$('.photo_panels .photo_panel').each(function(index){
    $('.photo_nav').append('<a class = "photo_nav_item"></a>');
});

$('.photo_nav a.photo_nav_item').addClass('current');
// Set up Navigation Links
$('.photo_nav a.photo_nav_item').click(function(){
    var navClicked = $(this).index();
    var Photo = $('.photo_content').get(navClicked);

    $(".photo_nav a.photo_nav_item").removeClass('current');
    $(".photoShow").removeClass('current');
    $(this).addClass('selected');
    $(".photoShow").fadeIn('slow', 'swing');
    $(".photoShow").html(Photo);

This is good for only two clicks? What is wrong with this? If I set the code below this works but I lose jQuery functions of the content:

    var newPhot = $(Photo).html() 
    $(".photoShow").html(newPhoto);

---

$('.photo_nav a.photo_nav_item').click(function(){...});

is only valid for existing a.photo_nav_items, so if you create new elements try

$('.photo_nav a.photo_nav_item').live('click', function(){...});

to attach the event handler to any element with this selector, now and in the future.