colorbox (which uses live) not rebinding after jQuery ajax call

Question

I have a list of elements that I am loading via ajax (using jQuery's .load()). Each of these elements has an (edit) link next to it that lightboxes (using colorbox) a little edit form. When the lightbox is closed I use the onClosed callback to reload the ajax list to show and changes made during the edit.

The colorbox call looks likes this:

$('.colorbox').colorbox({
  'iframe':true,
  'onClosed':function(){
    $("#featureList").load("/template/featureList","id="+$("#model_id").val());
  }
});

My list looks like this:

<div id="featureList">
  <ul id="features">
    <li id="item_000000000008+0">Element 1 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&amp;delta=0">Edit</a>)</li>
    <li id="item_000000000008+1">Element 2 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&amp;delta=1">Edit</a>)</li>
  </ul>
</div>

I looked at the colorbox source code and saw that is uses jquery.live() to do the bind. Here it is:

 $('.' + boxElement).live('click', function (e) {
   if ((e.button !== 0 && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey) {

return true; } else { launch(this);
return false; } });

You can see above the way colorbox works is by binding to "boxElement", which is a class it creates called "cboxElement". Before the live() bind colorbox adds this class (cboxElement) to all of the elements matching the selector (.colorbox in my example), then binds to this new class.

So thought that if I placed the colorbox bind outside of the ajaxed content it would bind to the links after I replaced the #featureList div with ajax, since live() is supposed to bind to elements "now or in the future". But it doesn't because it's binding to .cboxElement instead of .colorbox so when the ajax reloads colorbox doesn't re-add the .cboxElement class to the elements.

I tried calling $.fn.colorbox.init() in the ajax content to get colorbox to re-add the .cboxElement class to the elements, but this had no effect. (I do something like this when dealing with shadowbox, but it doesn't seem to work the same for colorbox.)

So then I tried to place all the colorbox code inside the ajax content. When I do this the colorbox binds are stacking/chaining. So the second time I call it I get two colorboxes (and have to hit the "close" button twice to return to the main screen). The third time I get three. This is because when I call colorbox again it adds the .cboxElement class, making the old live() binds active again, and it also adds ANOTHER live() bind to it. I tried to clear out the .live() binds by calling .die() first, but it didn't work for some reason.

I have found a couple of related posts but none of them solved this problem since colorbox is already using live():
http://stackoverflow.com/questions/3409796/problem-with-jquery-colorbox
http://stackoverflow.com/questions/2598500/jquery-ajax-table-to-a-page-but-now-the-colorbox-overlays-no-longer-work

Any other ideas out there? I am really stumped. I feel like I should switch to a different lightbox, but in general I like colorbox and it was working great everywhere else on the site until this ajax problem came up.

Thanks!!!

EDIT:

The problem seems to be related to something I didn't notice at first. What is happening is that the helper PHP function I am using with my Framework (Yii) is including the entire Colorbox script (and jQuery) in the AJAX response each time, and this ahem _might_ be what is causing the trouble.

For the time being I have given up on lightboxing these links, but the multiple-jQuery include has got to cause SOME kind of problem, so I'm going to look more into this when I have a chance.

Answer 1

i solved this in a pretty easy way.

If you are sending back an ajax response (usually a javascript response) - attach the normal colorbox binding code (as you would do in any place) in that response.

$('.colorbox').colorbox({
  'iframe':true,
  'onClosed':function(){
    $("#featureList").load("/template/featureList","id="+$("#model_id").val());
  }
});

attach this in your js response from server. this worked for me.

Answer 2

The problem appears to be related to something I didn't notice at first and therefore didn't put in my question. I have edited the question to reflect this new information.

I haven't had the time to fix it yet, but I am sure that the reason why including the binding in the AJAX response was multiple-binding is that the Yii Framework helper function I was using to include the script is also including jQuery and Colorbox in the response EACH TIME. Yii doesn't have a way to determine if the required scripts (like jQuery) have already been included in the main page and it includes it in the AJAX partial render.

I'll post again if and when I solve this issue. Cheers