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

我不知道我是否理解你的目标，但基本上你想在点击一个标签时做一些事情？ Here's用于设置回调函数以选择标签的文档。

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

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

其中ui包含有关所点击标签的信息。

Answer 2

jQuery UI标签有一个突出的问题，即使用return false;代替event.preventDefault();。这有效地防止了生活依赖的事件冒泡。这计划用jQuery UI 1.9修复，但与此同时，最好的方法是使用@rolfwaffle建议的内置选择事件。

Answer 3

也许你正在使用的tabs（）插件在创建了它的标签后调用event.preventDefault(); (Reference)。

然后它捕获click事件和冒泡停止，因此它不会调用您的click-function。在jQuery中，这是用

完成的

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

您必须更改tabs（）插件代码并删除此返回false;声明，或者如果你幸运的话，该插件可能有一个禁用该行为的选项。

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

jQuery / jQuery UI - $（“a”）。live（“click”，...）不适用于标签页

3 个答案: