jquery colorbox problem

Question

hi friends i have i am showing some data via ajax on my page when ajax complete and i click on view info the colorbox is not working but i show the data without ajax and i click on the colorbox link its working and opening

why javascript is not working when data comes via ajax

thanks

$.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>

when data comes from ajax and i click o the view Details colorbox is not working not opening but when i put this link without ajax its working fine

Answer 1

The ajax data is most likely loaded after the .colorbox() event handlers are being attahced. After you completed your ajax call you'll need to apply the colorbox event handlers to the new element's you've loaded.

You can call the .colorbox() method after completion, or check the .live() or .delegate() methods.

Answer 2

Try this:

<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>