How to load new pages into the current jQuery color package?

Question

I'm having trouble loading pages into an existing colorbox.

I have a colorbox that opens by clicking on the link linked 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 this color code 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 try to open each of these 3 links in the current color field when they are clicked. With the onComplete binding above, this works for the first click, but the next click just opens like a regular page.

If I add the following onComplete to the $.fn.colorbox() call in the code above, then the second click will also load into the same color number, but the third will not.

Is there a way to just snap all future clicks to open in the same colorbox? I still know little about event binding.

If you need clarification, please ask.

Answer 1

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

In this case, we apply it to the #cboxLoadedContent element, because new elements from AJAX calls must be included in it. It looks something like this:

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