jQuery/jQuery UI - $（「a」）。live（「click」，...）不能用於製表符

所以我有一些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（適用於未「tabified所有鏈接「）：

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

有誰知道它爲什麼會這樣？我真的想讓方法2正常工作，因爲可能有鏈接，我需要添加點擊事件，在頁面最初加載後添加的事件。

由於提前，

理查德

PS是的函數調用.live和.click無一不是$(document).ready()功能，之前有人說，這可能是問題 - 否則它不會在工作所有..

編輯：

我想出了該解決方案涉及在錨（數據-URL）和下面的代碼的額外屬性（輸出4 04如果頁面無法加載，則不會發現錯誤）。我的目標是在接下來的幾周/幾個月內擴展這個功能，使其更加強大。

$(".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; 
      }; 
     }); 
    } 
});

來源

2011-01-28 ClarkeyBoy

我不知道我是否明白你要做什麼，但基本上你想做點什麼事情，一旦一個標籤被點擊？ Here's用於設置選擇選項卡的回調函數的文檔。

編輯：不知道該鏈接是否正常工作，你想在事件下看select。但基本上它是：

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

其中ui有關於被點擊的選項卡上的信息。

來源

2011-01-28 06:36:21 roflwaffle

謝謝。我現在正在研究這個問題 - 無法弄清楚如何將其應用到我想要做的事情上，但我相信我會弄清楚什麼。如果我這樣做會再次在這裏發佈，並標記爲答案。 – ClarkeyBoy 2011-01-28 06:54:26

您是否試圖從其他來源（AJAX）加載內容到標籤內容區域？ jQuery UI選項卡有一個方法來做到這一點。 – roflwaffle 2011-01-28 06:56:23

-1

也許你正在使用的tabs（）插件在調用event.preventDefault();(Reference)之後，一旦它創建了它的選項卡。

然後它捕獲點擊事件和冒泡停止，所以它不會調用您的點擊功能。在jQuery中，這是用

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

你必須改變tabs（）插件代碼並刪除這個返回false;聲明，或者如果幸運的話，插件可能會有一個選項來禁用該行爲。

編輯：現在我看到你正在使用jQuery UI。然後你應該檢查那裏的文檔，因爲它是一個很棒的插件，如果你做html的話，它會做任何你想做的事情，並且通過正確的選項。

來源

2011-01-28 06:36:36 Betamos

jQuery UI選項卡有一個未解決的問題，其中使用return false;而不是event.preventDefault();。這有效地防止了依賴的事件冒泡。計劃修正爲jQuery UI 1.9，但同時最好的方法是使用@rolfwaffle建議的內置select事件。

來源

2011-12-15 14:49:39 scurker

jQuery/jQuery UI - $（「a」）。live（「click」，...）不能用於製表符

回答

相關問題