Dynamically loaded links do not start ColorBox on click, but on second click

Question

I have a problem that I cannot understand:

I load content dynamically using jQuery on the TinyScrollbar. The content contains links that should run the ColorBox. For references to work, I used jquery delegate . But after loading the content, my ColorBox only opens if I double-click the link .

(I suppose one of them will make jQuery understandable that there is a corresponding element, a second time to execute the delegate function.)

Here is my code:

 $(document).ready(function() { var main = $('#main'); main.tinyscrollbar(); $(function(){ $(window).bind( 'hashchange', function(e){ var hash = location.hash; if (hash != '' && hash != ' ' && hash != 'undefined') { var urlToLoad = hash; $('.overview').load(urlToLoad, function(response, status, xhr) { urlToLoad = ""; main.tinyscrollbar_update(); }); } }); $(window).trigger( 'hashchange' ); }); $(document).delegate("a.video", "click", function(e){$(this).colorbox({iframe:true, innerWidth:700, innerHeight:394, fastIframe:false, transition:"none"});return false; }); $(document).delegate("a.img", "click", function(e){$(this).colorbox({transition:"none"});return false;}); }); 

Answer 1

This makes sense because you only bind the event data and colorbox click parameters during the first click. Until you click again that you fire the click event and open the colorbox. Since you are already using your own click events, my suggestion would be to not associate the colorbox with anything, just call it directly when necessary. Example:

 $(document).delegate("a.img", "click", function(e){ $.colorbox({transition:"none", href:this.href}); return false; }); 

Answer 2

You need to remove the docReady function from the docReady function. In jQuery, this is:

 $(function() { //your docReady code }); 

is an abbreviated form:

 $(document).ready(function() { //your docReady code }); 

When you have the inline docReady code, the inline docReady code is queued and executed after the current docReady code completes. Note:

 $(document).ready(function() { $(function() { alert("FIRST in code, but executed SECOND"); }); alert("SECOND in code, but executed FIRST"); }); 

Honestly, I'm not sure that this will solve your problem, but in any case it can lead to strange problems.

Answer 3

This should contain images grouped into a "gallery". Not sure about the consequences of re-linking every click.

 $(document).delegate("a.img", "click", function(e){ $("a.img").colorbox({rel: 'group1', open: true}); return false; });