Behaviors Attach and cbox_complete

The cbox_complete event is fired on each new content loaded in colorbox, thus it should fire more often on a page. Moreover, when new content is loaded, e.g. via ajax, attach behaviors should be applied again. So your code gets executed not only on page load but also on ajax refreshed, e.g. in a colorbox. That's why the colorbox module itself initiates an attachBehaviors on cbox_complete.

To prevent binding multiple times, either use:
- context (will equal document on initial page load and the refreshed part of the page on ajax refreshes (in the case of
colorbox: #cboxLoadedContent)
- or once(): $(document).once('my-identifier').bind(...)

Colorbox is acting correctly: it should call attachBehaviors on each load of new content. It is the user who should check the context and if it needs to attach behavior to elements in that context.

Someone came to me for this issue and I had another look at it. OP (davidd07) is right after all, this is a bug in the colorbox_style.js files in the various themes sub directories. Therefore I re-open this issue and categorize it as a bug.

IMO, all occurrences of:
$(document).bind('some_cbox_event', ...)
should be replaced by:
$(document).once('colorbox_some_cbox_event').bind('some_cbox_event', ...)
I guess, you can also start with checking if context equals document before executing the above statement but that won't probably make the once() redundant.

Please test if this patch improves the situation and don't break anything else.

+++ b/js/colorbox.js
@@ -17,13 +17,11 @@ Drupal.behaviors.initColorbox = {
+  $(context).bind('cbox_complete', function () {
-  $(document).bind('cbox_complete', function () {

This should become;
$(document).once('colorbox_cbox_complete').bind('cbox_complete', function () {

Notes:
- the cbox_complete (and other) events are triggered on document and thus the bind must be done on document as well. If context does not equal document, you would bind it to just an element on which the event will never be triggered.
- the once() is to assure that we don't bind the same handler twice to document (which is what currently happens, hence the repeated console.log's)
- the id used in once must have a valid class syntax (e.g. no points (.)) and must be unique. So, use:
* your module name to differentiate with other modules.
* the event name to differentiate with other handlers (like cbox_closed) that are bound to document.
* the location (or e..g a name for the intended feature that this handler should accomplish) to differentiate with different handlers for the same event (ther is 1 in colorbox.js and 1 in colorbox_style.js).

E.g. use colorbox_cbox_complete, colorbox_style_cbox_complete, colorbox_style_cbox_load, and colorbox_style_cbox_closed (I assume that only 1 of the colorbox_srtyle.js files will ever be loaded at the same page. If that may not always be the case, also use the sub-directory name in the ids).

I have tested using the $(document).once('colorbox-style-cbox-complete').bind('cbox_complete'… style but then the code simply do not run.

Replacing document with context does work and avoids having the function called more than needed.

Strange,

So:
- $(document).bind(...) as in the current code works.
- $(context).bind(...) as in your proposal works.
- $(document).once(...).bind(...) as in my suggestion does not work (I assume that you mean that the event handler does not run).

Did you try:
- $(context.once(...).bind(...)
or
- if (context === document) { $(context.once(...).bind(...) }

Forget the above, I ran some tests, document cannot receive css classes, so once fails on $(document) as it will fail on $(context) the 1st time that is run (as context will equal document in that case). So the once should be run on another, real, element: document.body

$(document.body).once(...).each(function() {
  $(document).bind(...)
})

I tested this with:

    $(document.body).once('test').each(function() {
      window.alert('binding');
    });

and I only saw the alert once, also after loading images,closing colorbox, reopening it with another image.

BTW: Is there a reason to do the binding outside the attach and thus on file load?

The binding outside the attach was an old mistake, fixed in the patch above.

I will do some more testing in the weekend of this. Thanks for helping making Colorbox better!

Sorry for my late feedback. I tested with document.body but Colorbox don't work as it should with that solution.

I have committed the patch in #5 since that works in my testing and at least improves the issue.

I remain sceptical about binding cbox_complete events at any level in your dom that get refreshed, but will test the dev version against issue #2012590: attachBehaviors is also called for inline content.

For those who might find this issue in the future: we ran into the same problem while developing a site that had been running Colorbox 7.x-2.6. When I updated Colorbox to 7.x-2.7, the problem remained - until I ran 'drush colorbox-plugin' and updated the plugin.