liens chargés Dynamiquement ne déclenchent pas ColorBox sur clic, mais sur le deuxième clic

Question

J'ai un problème que je ne peux pas sembler être déterminer:

Je charger du contenu dynamiquement en utilisant jQuery à un TinyScrollbar. Le contenu contient des liens qui devraient déclencher ColorBox. Pour que les liens fonctionnent, j'ai utilisé le delegate de jQUery. Mais, après le chargement du contenu, mon ColorBox s'ouvre uniquement si je clique deux fois sur le lien.

(je suppose, un pour faire jQuery se rendre compte qu'il ya un élément correspondant, la deuxième fois pour exécuter la fonction de délégué.)

Voici mon 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

Cela est logique car vous liez uniquement l'événement de clic de la boîte de couleur et les données de paramètres lors du premier clic. Ce n'est que lorsque vous cliquez à nouveau que vous déclenchez l'événement click et ouvrez colorbox. Puisque vous utilisez déjà vos propres événements de clic, ma suggestion serait de ne pas lier colorbox à quoi que ce soit, il suffit de l'appeler directement en cas de besoin. Exemple:

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

Answer 2

Vous devez supprimer la fonction docReady à partir de la fonction docReady. En jQuery, ceci:

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

est la forme abrégée de ceci:

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

Lorsque vous avez intégré le code docReady, le code docReady intégré est mis en attente et exécuté après le code de docReady en cours est terminée. Observer:

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

     alert("SECOND in code, but executed FIRST"); 
}); 

Pour être honnête, je ne suis pas certain si cela va résoudre votre problème, mais il peut conduire à des problèmes étranges dans tous les cas.

Answer 3

Ceci devrait conserver les images groupées dans une "galerie". Je ne suis pas sûr des implications de relier chaque clic.

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