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() 函数中，在有人说这可能是问题之前 - 否则它根本无法工作。

编辑：

我想出的解决方案涉及锚点（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

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

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

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

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

Answer 2

jQuery UI 选项卡有一个突出的问题，即使用 return false; 而不是 event.preventDefault();。这样就有效的防止了live所依赖的事件冒泡。计划通过 jQuery UI 1.9 修复此问题，但与此同时，最好的方法是使用内置的在 @rolfwaffle 建议的选择事件中。

Answer 3

也许您正在使用的 tabs() 插件正在调用 event.preventDefault(); （参考） 一旦它创建了它的选项卡。

然后它捕获单击事件并且冒泡停止，因此它不会调用您的单击函数。在 jQuery 中，这是通过

$(element).click(function(){
    // Do stuff, then
    return false; // Cancels the event
});

您必须更改 tabs() 插件代码并删除此 return false; 来完成的。声明，或者如果幸运的话，该插件可能有一个选项来禁用该行为。

编辑：现在我看到你正在使用 jQuery UI。然后你应该检查那里的文档，因为它是一个很棒的插件，如果你正确处理 html 并传递正确的选项，它会做你想做的任何事情。