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

【问题标题】：Calling colorbox() for links in ajax-loaded content in tabs()为 tabs() 中的 ajax 加载内容中的链接调用 colorbox()
【发布时间】：2015-01-21 11:50:58
【问题描述】：

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

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

这就是我所拥有的（什么都不做）......：

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

【问题讨论】：

我们需要查看更多您的代码。你能创建一个小提琴吗？我很好奇为什么你的选择器是#tabs .iframe。您是否将 ajax 内容加载到每个选项卡内的 iFrame 中？
您在此处提供的代码没有任何问题；不，您不需要通过 ajax 包含库——在父页面中包含它就足够了。通过调用 console.log(!!$.colorbox) 或 alert(!!$.colorbox) 检查它是否已正确加载（也许您错误指定了路径？）。如果您确认它已正确加载，我们将需要查看您的 HTML 以帮助找出它无法正常工作的原因。
还要确保标签页正在加载：试试$( "#tabs" ).tabs().bind('tabsload',function(){alert('loaded');})

标签： jquery jquery-ui colorbox jquery-ui-tabs

【解决方案1】：

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

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

小提琴：http://jsfiddle.net/g27szcop/1/

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

【讨论】：

您好，感谢您的回复。我试过你的代码，但它似乎没有任何区别。我尝试设置一个 jsfiddle，但不知道如何在选项卡的上下文中创建 echo/html。这是一个基本设置（没有功能，ajax 方式），只是为了让您可以看到结构。 jsfiddle.net/kneidels/0uwnd5q1 tabs 中没有 iframe - 一些 tab 链接 sinply 进行 ajax 调用，返回的 html 以 tab 的形式显示，如jqueryui.com/tabs/#ajax （内容来自 ajax 示例）跨度>
对我来说一切都很好。我不确定为什么它不适合你。您可以发布更多代码吗？这一定是一个我没有看到的微妙错误。（这个页面在任何地方都在线吗？）
奇怪，我设置的演示，工作！ bit.ly/1D4djS2 早上我会再看一遍（这里是凌晨 2 点）-再次感谢
我又玩了一遍。我不知道如何，但它现在似乎工作。我会在它发布时奖励你积分 - 谢谢。
不一定不正确，但我认为这是多余的。没有第一个电话，您应该能够逃脱。