jQuery選項卡 - 請求爲什麼會相乘？

Question

比方說，我有一個jQuery UI選項卡（ajax加載），定義爲調用頁面abc.html。在那個頁面上，我打電話給另一個頁面，讓我們說def.html。在我的jQuery的選項卡定義我已經定義了標籤內的鏈接應該選項卡中打開，這是定義：

$(document).ready(function() { 
    $("#tabs").tabs({ 
     select: function(event, ui) { 
      $(ui.panel).undelegate('a', 'click'); 
     }, 
     load: function(event, ui) { 
      $(ui.panel).delegate('a', 'click', function() { 
       $(ui.panel).load(this.href); 
       return false; 
      }); 
     } 

    }); 
}); 

確定，所以在標籤鏈接之間來回時能正常工作。但是，在我的頁面def.html我有一個按鈕，我想用來加載初始選項卡。這是我如何做到這一點：

$("#cancelButton").click(function(event){ 
    event.preventDefault(); 
    $("#tabs").tabs('load', $("#tabs").tabs('option', 'selected')); 
}); 

這就叫我最初的abc.html就好了。問題是，當我再次從我新加載的abc.html中調用def.html的鏈接時，對def.html的請求會發生兩次。我再次點擊我的cancelButton，它重定向到abc.html，我再次點擊def.html，現在我的請求被調用了三次，依此類推。

我在猜測某處某處被綁定了多次，但沒有被綁定。任何幫助都可以，謝謝。

Answer 1

好吧，所以我想通了。發生了什麼是當我打電話

$("#cancelButton").click(function(event){ 
    event.preventDefault(); 
    $("#tabs").tabs('load', $("#tabs").tabs('option', 'selected')); 
}); 

只有tabsload事件會觸發。這意味着tabsselect事件之前未被觸發，因此鏈接不會被取消刪除並被多次綁定。

解決這個問題的方法是取消刪除，然後在加載時在選項卡內容中委派鏈接，刪除任何選項卡選擇功能。這是我的新選項卡定義：

$(document).ready(function() { 
    $("#tabs").tabs({ 
     load: function(event, ui) { 
      $(ui.panel).undelegate('a', 'click'); 
      $(ui.panel).delegate('a', 'click', function() { 
       $(ui.panel).load(this.href); 
       return false; 
      }); 
     } 
    }); 
}); 

Answer 2

我認爲這是因爲您正在調用原始選擇器$("#tabs")上的方法，而不是初始調用tabs的結果。嘗試保存參考，並在取消按鈕處理程序中使用它：

var $tabs = $("#tabs").tabs(...); 

$("#cancelButton").click(function(event){ 
    event.preventDefault(); 
    $tabs.tabs('load', $tabs.tabs('option', 'selected')); 
});