Jquery UIタブ：追加する前にイベントを表示する

Question

このページのようにタブを操作するためにJquery Uiの例を使用しています。http://jqueryui.com/demos/tabs/#manipulation最初のものを作成してaddイベントでvarを作成してshowイベントにalert（var_created）を書き込んだときにタブが作成されていない場合、varが未定義であることを示すことはできません。タブに問題はありません。

私はそれを示すためにjsfiddleでスクリプトを作成しました：

今では、アラートを印刷する必要がありますが、それは動作しません、あなたがしようとした場合、あなたはVARを伝えるtaht jslintとエラーがないことがわかります定義されているhttp://jsfiddle.net/paglia_s/5GU8M/1/

これを避ける方法はありますか？

Answer 1

削除var

var var1 = "try"; var1 = "try"でなければなりません。

が、私は明確にするためにあなたのリンクhttp://jsfiddle.net/5GU8M/4/

でそれを修正し、ここでの説明です：

あなたが使用している場合は「VAR MYVAR = 1」は、変数は、関数の内部でのみアクティブにされるであろうそれが使用されます。

「myvar = 1」と宣言するだけで変数がグローバルで、jquery関数の外で動作すると、スクリプト内のどこからでも呼び出すことができます。

Answer 2

jsFiddleは分かりません。変更は自動的に保存されますか？

変数を上限スコープに定義する必要があります。それ以外の場合、このvarは外部では定義されません。変数のスコープと実行順序：

var var1 = ""; 

$(function() { 
var $tab_title_input = $("#tab_title"), 
    $tab_content_input = $("#tab_content"); 
var tab_counter = 0; 

// tabs init with a custom tab template and an "add" callback filling in the content 
var $tabs = $("#tabs").tabs({ 
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
    add: function(event, ui) { 
     var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content."; 
     $(ui.panel).append("<p>" + tab_content + "</p>"); 
     var1 = "try"; 

    }, 

    show: function(event, ui) { 

     alert(var1); 

    } 
}); 

Answer 3

が実際にあなたが理解する必要がある問題がいくつかあります：

は、私は次のようやりました。

可変スコープ：varで宣言された変数は、ローカルスコープ（最も近い機能）です。 varなしで宣言された変数はグローバルスコープです。オーダー実行

：タブが既存のタブなしのjQueryのタブコントロールに追加され、tabsshowイベントがtabsaddイベントの前に実行されます。したがって、最初のタブが追加されたときにvar1が定義されないため、変数undefinedエラーが発生します。

あなたは、単にそれを使用する前var1が定義されているかどうかを確認することができます。

if (typeof(var1) !== 'undefined') alert(var1); 

それとも、あなたのコードを並べ替えます。

例：http://jsfiddle.net/william/6fH4v/1/を参照してください。