変数宣言の問題

Question

私は、jQueryを使用してテキストボックスの値を取得するためのフォームを用意しました。 document.readyイベントではなく機能外

var bdmm = $("#bdmm").val(); 

、および機能でそれを参照し、テキスト値がnull：問題は、私はこのような変数を宣言した場合です。しかし、関数内で宣言すると、うまく動作します。なぜこれはそうですか？

のjQuery：

これますませ作品：

$(document).ready(function() { 
     var bdmm = $("#bdmm").val(); 
     $('#submit').click(function(e){ 
       alert(bdmm); 
       e.preventDefault(); 
     }); 
    }); 

これは動作します：

$(document).ready(function() { 
      $('#submit').click(function(e){ 
       alert($("#bdmm").val()); 
       e.preventDefault(); 

           //OR 
          var bdmm = $("#bdmm").val(); 
          alert(bdmm); 
       e.preventDefault(); 

      }); 
     }); 

Answer 1

それは準備ができてDOMにすぐにテキストボックスの値を取得する最初の例では。既に値が入っているとうまくいきますが、実際にクリックイベントが発生した場合はre - フォームに問い合わせることはありません。おそらくあなたが望むものではないでしょう。

2番目の例では、実際にクリックイベントが発生したときにフォームフィールド値が取得されます。これはほぼ確実です。

Answer 2

DOMが準備完了した直後に、おそらく$("#bdmm").val()が空であり、ユーザーがフォームを送信しようとしたときに既に値があります。

ので、フィールドが空であるコールバックの外に、コールバック内のフィールドには、すでにはに充填されています。

また、（submitというIDを持つ要素がフォームの送信ボタンと異なる場合を除き）、フォーム要素のクリックイベントにバインドする代わりに、フォーム送信にバインドすることをお勧めします（jQuery's .submit()）。これにより、柔軟性が増し、フォームが「入力」ボタンを押して送信されたときにも動作するはずです。

Answer 3

あなたはまた、（私はクラスにwarap好むが、それを簡単な例を維持するために、この時間を行うことはありません）グローバル変数を作成することができます。

var MyGlobal; 

$("myTextBox").change(function(){ 
    MyGlobal = $(this).val(); 
}); 

次に、あなたのコードは非常に動作するはずです...すべてがこのようになります：

var bdmm; 
    $(document).ready(function() { 
      $("myTextBox").change(function(){ 
       bdmm = $(this).val(); 
      }); 

      $('#submit').click(function(e){ 
        alert(bdmm); 
      }); 
     }); 

テキストボックスを編集すると値が再初期化されます。

http://api.jquery.com/change/