为 ajax 中的链接调用 colorbox() - 在 tabs() 中加载内容

Question

我正在使用 jQuery UI tabs() 将 ajax 内容加载到页面中。其中一些内容有指向模态 windows 的链接，应该通过 colorbox() 打开，但我无法让它们正常启动。

有人能给我指路吗？我是否需要在通过 ajax 加载的内容中包含 colorbox 库？我认为它在父页面中就足够了，我只是在内容加载后再次调用 colorbox，但我无法让它工作。

这就是我所拥有的（什么都不做）...:[=13=]

$( "#tabs" ).tabs().bind('tabsload',function(event, ui){
    //alert('The tab is loaded. What now?');
    $("#tabs .iframe").colorbox({iframe:true, width:"65%", height:"80%"});
});

Answer 1

到目前为止，您的代码对我来说还不错。我整理了一个简单的 fiddle 来演示此功能。我使用 activate 事件而不是 load，因为后者不起作用（尽管这可能是因为我没有通过 AJAX 加载我的选项卡）。无论哪种方式，activate 也应该适合您：

$("#tabs").tabs({
    activate: function (event, ui) {
        $("#tabs .colorbox").colorbox({iframe:true, width:"65%", height:"80%"});
    }
});

Fiddle: http://jsfiddle.net/g27szcop/1/

您不需要在 AJAX 内容中包含 colorbox 库，除非您正在做一些奇怪的事情，比如在每个选项卡中创建一个 iFrame，然后将内容加载到。如果您能够 post 更多代码，我可以更新我的 fiddle 并提供更多建议。

为 ajax 中的链接调用 colorbox() - 在 tabs() 中加载内容

Calling colorbox() for links in ajax-loaded content in tabs()

jquery

jquery-ui

jquery-ui-tabs

colorbox