jquery 选项卡 - 在当前面板中打开链接不起作用

Question

我刚刚开始使用 Jquery ui 选项卡。 Tabs的内容一开始主要是静态内容。

现在，面板中的某些内容确实具有指向某种子内容的链接。 因此，如果用户单击面板中的链接，我想用来自链接的内容替换当前面板的内容。

所以我直接使用 jquery ui tab 文档中的脚本，但我无法让它工作。 它始终直接打开链接，而不是在面板内打开。 我用于测试的代码非常简单：

<div id="MyTabs">
    <ul>
        <li><a href="#TestTab1">TestTab</a></li>
        <li><a href="#TestTab2">TestTab</a></li>
    </ul>
    <div id="TestTab1">
        Lorem ipsum dolor. dumm di dumm
        <a href="http://mywebserver/somelink">Test</a>
    </div>
    <div id="TestTab2">
        Lorem ipsum dolor. dumm di dumm 2
        <a href="http://mywebserver/somelink2">Test 2</a>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#MyTabs').tabs({
            load: function(event, ui) {
                $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;

                });
            }
        });
    });

此外，如果我使用 AJAX 调用加载面板的内容，则面板内的任何链接都不起作用。

知道我做错了什么吗？

非常感谢您的帮助，

问候

Maik

Edit1：

好的，我得到了进一步的了解。 我用以下代码片段替换了 Javascript：

        $(function() {
        $("#MyTabs").tabs();
        $("#MyTabs").bind('tabsshow', function(event, ui) {
            AddClickHandler(ui);
        });
    });

    function AddClickHandler(ui) {
        $('a', ui.panel).click(function() {
            MyAlert("AddClickHandler");
            $(ui.panel).load(this.href, AddClickHandler(ui));
            return false;
        });
    }

在此更改之后，面板上的所有链接都将更新当前面板的内容。 到目前为止，一切都很好。 还剩下一个问题。 我无法让它适用于后续链接。 当 ajax 调用完成时，我尝试使用第二个“AddClickHandler”进行回调。 使用带有简单警报的不同函数表明，当面板内容更新时，它实际上被调用。 但我无法将任何内容绑定到该内容中的新链接。 “$('a', ui.panel)...”不起作用。 正确的选择器是什么？

有什么提示吗？

问候

迈克

Answer 1

看起来根本不正确..

示例如下所示：

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

注意，链接位于选项卡本身中，而不是选项卡内容中

编辑：
好的，我想我看到你的问题了。 我没有看到任何代码可以让您在选项卡中注册打开这些链接。 因此，当用户单击链接时，它会像普通链接一样在浏览器窗口内打开......无论如何。

尝试这样的事情：

$("#MyTabs").find("a").click(function(){
   $(this).parent(".ui-tabs-panel").load(this.href);
   return false;
});

编辑2：
我刚刚意识到您的“加载”函数与我上面编写的函数执行相同的操作。 无论如何，尝试我的函数，看看它是否有效，如果它确实使用 firebug 单步执行你的函数，看看有什么不同，如果它没有.. 使用 firebug 单步执行你的函数.. 或者提供在线演示，我可以看看它

编辑3：
好的，这是更好的解决方案：

添加此功能：

var bindAjaxLinks = function(){
    $("#MyTabs").find("a").click(function(){
         $(this).parent(".ui-tabs-panel").load(this.href, {}, bindAjaxLinks);
         return false;
    });
}

//in the tabs constructor add the select function:

$("#MyTabs").tabs({select: function(event, ui) {
   bindAjaxLinks();
  },
  //your other stuff
 }

可能不是最好的解决方案，因为每次打开链接时它都会将单击功能重新绑定到所有链接。 但目前可能没问题，除非您正在构建一些生产站点

Answer 2

您可以按如下方式使用 live() ：

$("#myTabs").tabs({
        load: function(event, ui) {
         $("#myTabs").find("a").live('click', function() {
        $(ui.panel).load(this.href);
        return false;
    });
}})