How do I load new pages into my current jQuery colorbox?
- by thinkswan
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() {
$.fn.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.
