jquery - 动态加载的链接不会在单击时触发 ColorBox，但在第二次单击时会触发

Question

我有一个我似乎无法解决的问题:

我使用 jQuery 将内容动态加载到 TinyScrollbar。内容包含应启动 ColorBox 的链接。为了使链接正常工作，我使用了 jQUery 的delegate。但是，加载内容后，我的 ColorBox 只有在单击链接两次时才会打开。

(我想，是为了让 jQuery 意识到有一个匹配的元素，第二次执行委托(delegate)函数。)

这是我的代码:

$(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

这是有道理的，因为您仅在第一次单击期间绑定(bind)颜色框单击事件和设置数据。直到再次点击才会触发点击事件并打开colorbox。由于您已经在使用自己的点击事件，我的建议是不要将 colorbox 绑定(bind)到任何东西，只需在需要时直接调用它即可。示例:

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