如何使用单击功能创建链接，以显示由 jQuery 组成的子内容？

Question

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>

JavaScript/jQuery：
创建三个链接来显示具有 DOM 元素和引用的照片的“photo_content”：

$('.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);

这只需单击两次即可吗？这有什么问题吗？如果我设置下面的代码，这可以工作，但我会丢失内容的 jQuery 函数：

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

Answer 1

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

仅对现有的 a.photo_nav_items 有效，因此，如果您创建新元素，请尝试

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

将事件处理程序附加到使用此选择器的任何元素，无论是现在还是将来。