jquery colorbox call following ajax load not working

I'm loading in some image using .load . I want to then click on these images and invoke colorbox. I have tried the following:

 $("a[rel='colorbox']").live('click',
      function() {
          $(this).colorbox({t开发者_如何学Goransition:"fade"});
      }
 );

But with no joy. Any ideas out there?

First of all, you shouldn't use .live() it's deprecated. Instead learn how to use .on() You'll find this is a much more powerful listener and will help solve your problem.

On page load initially the DOM is ready, and colorbox is initilized for the selector AJAX calls a new piece of the page with some DOM element that is in the colorbox selector list, but isn't noticed because it loaded into the page after the selector was read by the javascript.

Try the following - as it watches body for all, existing and new #main a[rel='lightbox']:

EDIT:

$("body").on("click", "#main a[rel='lightbox']", function(event){
  $.colorbox({href: $(this).attr("href"),
 transition: "fade",
 innerHeight: '515px',
 innerWidth: '579px',
 overlayClose: true,
 iframe: true,
 opacity: 0.3
   });
 });

Have you asserted that $("a[rel='colorbox']").length>0?

Edit: Try this and see if clicking the link in question triggers a breakpoint:

$("a[rel='colorbox']").live('click',
      function() {
          debugger;
          $(this).colorbox({transition:"fade"});
      }
 );

If it doesn't break, then the the link is not mached by the selector (a[rel='colorbox']). If it does, then the problem probably does not have anything to do with your use of the load()