jquery-ui - jQuery/jQuery UI - $ ("a").live ("click", ...) 不适用于选项卡

Question

所以我有一些 jQuery UI 选项卡。源码如下:

HTML:

<div class="tabs">
    <ul>
        <li><a href="#ranges">Ranges</a></li>
        <li><a href="#collections">Collections</a></li>
        <li><a href="#designs">Designs</a></li>
    </ul>
    <div id="ranges"></div>
    <div id="collections"></div>
    <div id="designs"></div>
</div>

jQuery:

$(document).ready(function() {
    $(".tabs").tabs();
});

我的问题是，我试图让每个选项卡在单击相关链接时将页面加载到内容面板中。首先，我只是尝试在单击链接时设置所有面板的 html。从下面的代码来看，如果我使用方法 1，它适用于所有链接。但是，如果我使用方法 2，则不会 - 但仅用于选项卡中的链接(即您单击以选择选项卡的标签)。

方法1(始终适用于所有链接，但不适用于调用此方法后添加的链接):

$("a").click(function () {
    $("#ranges, #collections, #designs").html("clicked");
});

方法 2(适用于所有未“制表”的链接):

$("a").live("click", function () {
    $("#ranges, #collections, #designs").html("clicked");
});

有谁知道为什么会这样？我真的很想让方法 2 正常工作，因为很可能有一些链接需要我添加点击事件，这些事件是在页面最初加载后添加的。

提前致谢，

理查德

PS 是的，对 .live 和 .click 的函数调用都在 $(document).ready() 函数中，之前有人说这可能是问题所在 - 否则它根本无法工作..

编辑:

我提出的解决方案涉及 anchor (data-url)中的额外属性和以下代码(如果无法加载页面，则输出 404 未找到错误)。我的目标是在接下来的几周/几个月内扩展它，使其变得更加强大。

$(".tabs").tabs({
    select: function (event, ui) {
       $(ui.panel).load($(ui.tab).attr("data-url"), function (responseText, textStatus, XMLHttpRequest) {
           switch (XMLHttpRequest.status) {
               case 200: break;
               case 404:
                   $(ui.panel).html("<p>The requested page (" + $(ui.tab).attr("data-url") + ") could not be found.</p>");
                   break;
               default:
                   $(ui.panel).html("<p title='Status: " + XMLHttpRequest.status + "; " + XMLHttpRequest.statusText + "'>An unknown error has occurred.</p>");
                   break;
           };
       });
   }
});

Answer 1

我不知道我是否理解您的目的，但基本上您想在单击选项卡后执行某些操作？ Here's用于设置用于选择选项卡的回调函数的文档。

编辑:不知道该链接是否正常工作，您想查看“事件”下的选择。但基本上是:

$("#tabs").tabs({
    select: function(event, ui) { ... }
});

其中 ui 包含有关所单击的选项卡的信息。