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

Question

I'm having a bit of trouble loading pages into an already-existing colorbox.

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.

Answer 1

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;
});