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点击处理程序才能实现您的目标

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

$.on

的文档

Working Fiddle

根据网址进行更新：

您get_photos.php正在输出td这样的

<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更改为photos1代码上的$.on并更改$.on这样的调用

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

它应该可以正常工作。：）

Answer 2

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

正如你所看到的，有一些不确定因素，但你不应该解决这些问题。

附带JQuery的Colorbox

2 个答案: