проблема с цветным ящиком jQuery

Question

привет, друзья, я показываю некоторые данные через ajax на моей странице, когда ajax завершен, и я нажимаю на информацию о просмотре. Colorbox не работает, но я показываю данные без ajax, и я нажимаю на ссылку colorbox, ее работу и открытие

почему Javascript не работает, когда данные поступают через AJAX

благодаря

$.ajax({ 
    url: "remote.php?act=ShowContacts&id="+id, 
    cache: false, 
    success: function(html){ 
    $("#displaycontacts").html(html); 

    } 
}); 

    $("#viewcontact").colorbox({width:"500px", height:"520px", iframe:true}); 

<a href="viewcontact.php?id=3" id="viewcontact" class="cboxElement">View Details</a> 

, когда данные поступают из AJAX и я нажимаю о представлении детали ColorBox не работает, не открывая, но когда я положил эта ссылка без ajax работает нормально

Answer 1

Данные ajax, скорее всего, загружаются после того, как обработчики событий .colorbox() будут завершены. После того как вы завершили свой вызов ajax, вам нужно применить обработчики событий colorbox к загруженному новому элементу.

Вы можете вызвать метод .colorbox() после завершения или проверить методы .live() или .delegate().

Answer 2

Попробуйте это:

<script> 
    $.ajax({ 
     url: "remote.php?act=ShowContacts&id="+id, 
     cache: false, 
     success: function(response){ 
     $("#displaycontacts").html(response); 
     } 
    }); 
    $("body").delegate("a[rel='lightbox']", "click", function (event) { 
         event.preventDefault(); 
         $.colorbox({href: $(this).attr("href"), 
           width:"500px", 
           height:"520px", 
           iframe:true}); 
    }); 
</script> 
<a href="viewcontact.php?id=3" rel='lightbox'>View Details</a>