Question

我试图使用 Colorbox 来拍摄来自Facebook的照片, 这对在页面上显示的图像效果很好。但是当我使用 < code>.getJSON 来加载25个以上的图像并将其附加到我的表格上时, 颜色框不再有效。我看到有人提到使用 < code>. live 命令, 但我猜我没注意要做什么...

这是我的密码

$(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 返回到 jquery 的表格行的 json 字符串。

这里仅是基 html 表格的一行, 但初始有 5 行, 初始有 5 行, 且 < code> 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 () 来解析? 它似乎更像是在添加新照片后重新更新颜色框的问题。

我看到你接受了乔伊的回答,但下面可能会有一些想法,你也许愿意考虑一下,如果只是简化守则的话。

$(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 的文档

"http://jsfiddle.net/joycse06/4vurDC/151/" rel="nown" >work Fiddle

基于 URL 的更新 :

您 gig_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> to class="photos1> on a 标签上 a 标签上 photos1 class class> $.on class > 类更改为 $.on call like this



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


并且应该工作良好。 ) ()

友情链接