How do I load new pages into my current jQuery colorbox?

I'm having a bit of trouble loading pages into an already-existing colo开发者_Go百科rbox.

I have a colorbox opened by clicked a link that is bound by the following code:

$("a.ajaxAddPage").colorbox({
    onComplete: function(){
        $('ul#addPage li a').click(function() {
            $.colorbox({href: $(this).attr('href')});

            return false;
        });
    }
});

The following HTML is loaded into that colorbox via AJAX:

<div class='colorboxWindow'>
    <ul id='addPage'>
        <li><a href='addCat.php'>Add Category</a></li>
        <li><a href='addPage.php' class='current'>Add New Page</a></li>
        <li><a href='addPage2.php'>Add Another Page</a></li>
    </ul>

    <h3>Add New Page...</h3>
</div>

I'm trying to have each of those 3 links open in the current colorbox when they are clicked. With my onComplete binding above, this works for the first click, but the next click just opens like a normal page.

If I add another onComplete to the $.fn.colorbox() call in the above code, then the 2nd click will also load in the same colorbox, but the 3rd will not.

Is there a way to just bind all future clicks to open in the same colorbox? I don't know much about event binding yet.

If you need clarification, please ask.

How about using jQuery .live() method? It should handle new elements being added and attach the event handler to the new elements.

In this case, we apply it to the #cboxLoadedContent element because that's where the new elements from AJAX calls should come in. It looks something like this:

$("a.ajaxAddPage").colorbox();

$('#cboxLoadedContent a').live('click', function() {
  $.colorbox({href: $(this).attr('href')});
  return false;
});