JQuery change colorbox content

Question

I have tried questions with simliar names already, but they do not work. (Example: How do I load AJAX content into the current Colorbox window? )

I have a main page: (including jQuery 1.6.1)

<script type="text/javascript" src="js/jquery.colorbox.js"></script> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script> jQuery(function(){ $("#aLink").colorbox(); $('#blub a[rel="open_ajax"]').live('click', function(e){ e.preventDefault(); var url = $(this).attr('href'); $.ajax({ type: 'GET', url: url, dataType: 'html', cache: false, beforeSend: function() { //$('#cboxContent').empty(); $('#cboxLoadedContent').empty(); $('#cboxLoadingGraphic').show(); }, complete: function() { $('#cboxLoadingGraphic').hide(); }, success: function(data) { $('#cboxLoadedContent').append(data); } }); }); }); </script> <a href="1.html" id="aLink">colorbox open</a> 

This works great, the (simple) 1.html content is loaded into the colorbox:

1.html:

 <div id="blub"> <a rel="open_ajax" href="2.html">Change Content</a> </div> 

Now I want to change the content by clicking on the link. This does not work. Ether I get an extra colorbox, or nothing happens.

Thanx!

Answer 1

You can use the jquery live () function to view clicks on existing and future colorbox channels. In addition, I recommend not using rel as your selector. This attribute is intended for use in SEO. So in this example, I moved your selector from the rel attribute to the class attribute:

 $(document).ready(function() { $('a.open_ajax').live('click', function(){ $.colorbox({ open:true, href: this.href //plus any other interesting options }); return false; }); }); 

Then just make sure that everything you want to activate for the new colorbox content has the open_ajax and href classes. For instance:.

<a class="open_ajax" href="colorboxPage.html">Open</a>

Update for jQuery 1.7+

For jQuery 1.7, since live () is deprecated, you need to do it like this:

 $(document).on("click", "a.open_ajax", function() { //everything that was in the live() callback above });