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" }）。 2警告が表示されます（ "開始：例-1" および "イベント：例-1"）

しかし、私は再び呼び出す場合： addTab（ "＃タブ-2"、 "タブ-2"、{ 名前： "Example-2" }）; 2つのアラートが表示されますが、最初のメッセージと最初のコールのメッセージで2番目のメッセージが表示されます

私は間違っていますか？ タブ実装のバグですか？事前

Answer 1

いいえ、これはバグではありません。

addTab()変数tabsを初めて呼び出すときはnullなので、if文の本文が実行されます。内部でaddメソッドを定義している場合は、本体がdata.name（Example 1）で動作します。これは予想されます。

問題は、最初の実行中にExample 1値の変数dataを含むクロージャが作成されることです。 addTab()を2回目に電話すると、tabsがすでに作成されており、addの方法data.nameは、最初の実行中に保存されたの古いdata.nameを依然として参照しています。 alert()にはdataの新しい値が表示されません。

http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/を参照してください。

あなたはそれが閉鎖に「保存」が、そのようなjQueryの.data()として他のメカニズムを使用しますので、直接add内部addTabs変数/パラメータへのアクセスないことによってそれを解決することができます。

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); 
}