Question

我有以下簡單的代碼：

var tabs = null; 
function addTab(id, title, data) { 
    alert("Begin: " + data.name); 
    if (tabs === null) { 
     tabs = $("#center-tabs").tabs({ 
      tabTemplate: "<li style='line-height: 0.5'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
      add: function (event, ui) { 
       alert("Event: " + data.name); 
      } 
     }); 
    } 
    tabs.tabs("add", id, title); 
    tabs.tabs("select", id); 
} 

當我打電話： addTab（ 「＃製表1」， 「製表1」，{ 名： 「實施例1」 }）;顯示 兩個警報（ 「開始：實施例-1」 和 「事件：實施例-1」）

但是，如果我再次調用： addTab（ 「＃製表2」， 「製表2」，{ 名稱：「Example-2」 }）; 顯示兩條警報，但第一條顯示正確的消息，第二條顯示第一條消息（「Begin：Example-2」，但是「Event：Example-1」）

我在做什麼錯？ 它是一個製表符執行錯誤？

在此先感謝

Answer 1

不，它不是一個錯誤。

您第一次打電話addTab()變量tabs是null因此if語句的主體被執行。如果你在內部定義add方法，可以使用data.name（Example 1）。這是預料之中的。

問題是，在第一次運行期間，會創建一個包含data變量的閉包，其值爲Example 1。當您第二次致電addTab()時tabs已被創建並且在add方法data.name內仍指在第一次運行期間得到保存的舊data.name。您的alert()看不到data的新值。

請參閱http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/。

您可以通過不訪問內部addaddTabs變量/參數直接，因爲這將「保存」成閉合，但使用其他機制，如jQuery的.data()解決它。

var tabs = null; 
function addTab(id, title, data) { 
   if (tabs === null) { 
       tabs = $("#center-tabs").tabs({ 
           tabTemplate: "...", 
           add: function (event, ui) { 
             console.log("Event: " + $(this).data('name')); 
           } 
       }); 
   } 
   tabs.data('name', data.name); 
   tabs.tabs("add", id, title); 
   tabs.tabs("select", id); 
} 

​​就是一個例子。

Answer 2

要設置在＃中心的選項卡的標籤容器兩次，一次與每個調用addTab。嘗試更改您的代碼是這樣的：

var tabs = $("#center-tabs"); 
function addTab(id, title, data) { 
    alert("Begin: " + data.name); 
    if (!tabs.hasClass('ui-tabs')) { 
     tabs.tabs({ 
      tabTemplate: "<li style='line-height: 0.5'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
      add: function (event, ui) { 
       alert("Event: " + data.name); 
      } 
     }); 
    } 
    tabs.tabs("add", id, title); 
    tabs.tabs("select", id); 
}