Colorbox with JQuery가 추가되었습니다.

Question

페이스 북에서 채워진 사진에 Colorbox을 사용하려고합니다. 페이지로드시 채워진 이미지에 적합합니다. 그러나 .getJSON을 사용하여 25 개의 이미지를 더로드하고 테이블에 추가하면 색상 상자가 더 이상 작동하지 않습니다. 나는 .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 문자열을 반환 내 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를 다시 초기화하는 것이 더 문제가되는 것처럼 보입니다.

조이의 대답을 받아 들였지만 코드를 단순화하는 것과 관련하여 고려하고 싶은 몇 가지 아이디어가있을 수 있습니다.

$(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을 기반으로

업데이트 : 우리가 $.on 클래스에서 photos1 클래스를 사용하여이 같은 $.on 전화를 변경되므로

당신 get_photos.php은 a 태그에 class=\"photos1\"이

<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\" 같은 td를 출력한다

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

그리고 잘 작동합니다. :)