帶有JQuery的Colorbox附加

Question

我正在嘗試使用Colorbox來處理來自Facebook的照片，該圖片適用於在頁面加載時填充的圖像。但是，當我使用.getJSON加載25張圖像並將它們附加到我的表格時，顏色框不再起作用。我已經看到了使用.live命令的提及，但想我不會下該怎麼辦...

這裏是我的jQuery代碼

$(function() { 

    $(".photos1").colorbox({ 
     rel: 'photos1', 
     transition: "fade" 
    }); 


    var loading = '<img src="images/ajax-loader.gif" /> <b>LOADING</b>'; 

    $('#get_albums').click(function() { 
     $('#ld_ck').html(loading); 
     $('#get_albums').html(''); 
     load_albums(); 
    }); 

    $('#get_photos').click(function() { 
     $('#ld_ck').html(loading); 
     $('#get_photos').html(''); 
     load_photos(); 
    }); 

    function load_photos() { 
     var after = $('#photos_next').val(); 
     var offset = $('#photos_offset').val(); 
     var gallery_id = $('#g_id').val(); 
     $.getJSON('get_photos.php?gallery_id=' + gallery_id + '&after=' + after + '&offset=' + offset, function (json) { 
      $.each(json, function (key, val) { 
       if (key == "photos") { 
        $('#photos').append(val); 
       } 
       if (key == "after") { 
        $('#photos_next').val(val); 
       } 
       if (key == "offset") { 
        $('#photos_offset').val(val); 
       } 
       if (key == "count") { 
        if (val == "25") { 
         $('#get_photos').html('<b>SEE MORE</b>'); 
        } 
       } 
      }); 
      $('#ld_ck').html(''); 
     }); 
    } 

}); 

get_photos.php返回一個字符串json錶行了jQuery。

這是基礎HTML表格的只有一行，但最初有5行和get_photos.php又增加了5同時

<table width="99%" border="0" cellspacing="5" cellpadding="0" id="photos" class="photos"> 
    <tr> 
    <td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td> 
    <td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td> 
    <td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td> 
    <td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td> 
    <td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td> 
    </tr> 
</table> 
<div style="width:99%; text-align:center;" id="see_more"> 
    <input name="photos_next" id="photos_next" type="hidden" value="xxxxxxxxxxxx" /> 
    <input name="photos_offset" id="photos_offset" type="hidden" value="25" /> 
    <input name="g_id" id="g_id" type="hidden" value="xxxxxxxx" /> 
    <a id="get_photos"><b>SEE MORE</b></a></div> 
<div id="ld_ck" class="loader" style="width:99%; text-align:center;" ></div> 

Answer 1

這是真的可以解決.live()？這似乎更多的是在添加新照片後重新初始化colorBox的問題。

我看到你已經接受了Joy的答案，但是下面可能有一些想法，你可能會考慮如果僅僅關於簡化代碼。

$(function() { 
    var colorboxSettings = ({ 
     rel: 'photos1', 
     transition: "fade" 
    } 
    $(".photos1").colorbox(colorboxSettings); 

    var loading = '<img src="images/ajax-loader.gif" /> <b>LOADING</b>'; 

    $('#get_albums').on('click', load_albums); 
    $('#get_photos').on('click', load_photos); 

    function load_photos() { 
     $('#ld_ck').html(loading); 
     $('#get_photos').html(''); 
     var data = { 
      after: $('#photos_next').val(), 
      offset: $('#photos_offset').val(), 
      gallery_id: $('#g_id').val() 
     }; 
     $.getJSON('get_photos.php', data, function(json) { 
      if(json.photos && json.after && json.offset && json.count) {//or similar 
       $('#photos').append(json.photos); 
       $('#photos_next').val(json.after); 
       $('#photos_offset').val(json.offset); 
       if (Number(json.count) == 25) { $('#get_photos').html('SEE MORE'); } 
       $.colorbox.remove();//maybe? 
       $(".photos1").colorbox(colorboxSettings);//or is it $(".photos") ? 
      } 
      $('#ld_ck').html(''); 
     }); 
    } 
}); 

正如你所看到的，有一些不確定因素，但沒有你不應該能夠解決的。

Answer 2

你必須綁定一個live點擊處理程序來實現你想要的

$('.photos').on('click','.photos1', function() { 
    $.fn.colorbox({href:$(this).attr('href'), open:true, 
        rel: 'photos1',transition: "fade"}); 
    return false; 
} 

的文檔$.on

Working Fiddle

基於URL

更新：

你get_photos.php是這樣

<td align=\"center\" class=\"photos\" style=\"padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;\"> 
    <a id=\"photos1\" href=\"http:\/\/sphotos.xx.fbcdn.net\/hphotos-ash4\/s720x720\/398601_355232294489552_174042505941866_1396720_1688100724_n.jpg\"><img src=\"http:\/\/photos-b.ak.fbcdn.net\/hphotos-ak-ash4\/398601_355232294489552_174042505941866_1396720_1688100724_s.jpg\" alt=\"355232294489552\" border=\"0\"> 
    <\/a> 
<\/td> 

變化id=\"photos1\"到class=\"photos1\"上a標籤輸出td因爲我們使用$.on類photos1類，並改變$.on這樣調用

$('table#photos').on('click','.photos1', function() { 
    $.fn.colorbox({href:$(this).attr('href'), open:true, 
        rel: 'photos1',transition: "fade"}); 
    return false; 
} 

，它應該可以正常工作。 :)