3

私は動作する次のコードを持っています - 

$(function(){
    $('#testbutton').click(function(){
        var checkedValue = $('[name="someRadioGroup"]:radio:checked').val();
        $('#result').html('The radio element with value <tt>' + checkedValue + '</tt> is checked');
    });
});

$('#testbutton') は、id が testbutton の HTML 要素をフェッチし、それにイベント ハンドラーを割り当てることを理解しています。

しかし、そのコードを関数リテラル内に配置する必要がある理由がわかりません。

$(function(){（および対応する）を削除すると、});機能しません。

ただし、他のコードは関数リテラルでラップしなくても機能します。例 - alert('Hi there')

違いはなんですか？アラートは機能するのに、イベント割り当てステートメントが機能しないのはなぜですか?

4

3 に答える 3

6

$(function(){...});の省略形です$(document).ready(function(){...});。これの目的は、操作する予定の要素が DOM に存在するまでコードを実行しないことです (これは通常、ドキュメントの準備が整った後です)。

于 2012-08-30T17:30:26.653 に答える
2

これは要件ではありません。

DOM の準備ができたときに呼び出されるイベント ハンドラーにコードを配置しています。

コードを DOM 対応ハンドラーに配置せず、コードが DOM 選択を実行する場合は、実行前に DOM の準備が整っていることを確認する別の方法を見つける必要があります。

コードが DOM 選択を実行しない場合、それは必要ありません。alert()要素をフェッチする必要がないため、これが機能する理由です。

代替案はこれです。

<body>
   <button id="testbutton">click</button>
   <div id="result"></div>

   <script type="text/javascript" src="/your/script.js"></script>
</body>

これにより、ページ上のすべての要素の下にコードが配置されるため、コードの実行時に確実に使用できるようになります。

もう 1 つの方法は、window.onloadハンドラーを使用することです。

window.onload = function() {
    // your code
};

またはjQueryを使用します。

$(window).on("load", function() {
    // your code
});

これは、画像などのすべてのリソースがロードされるのを待機することを除いて、DOM Ready ハンドラーに似ています。

于 2012-08-30T17:30:56.013 に答える
0

最も基本的なレベルでは、フォームの何かは、(function(){...})()すぐに実行される関数リテラルです。これが意味することは、関数を定義してすぐに呼び出すということです。

このフォームは、関数内で定義したものはすべてその関数に対してローカルのままであり、外部からアクセスできないため、情報の隠蔽とカプセル化に役立ちます (明示的に公開しない限り、通常は返されたオブジェクト リテラルを介して)。

この基本的な形式のバリエーションは、jQuery プラグイン (または一般的にこのモジュール パターン) で見られるものです。関数リテラルを定義しているため、明示的に情報を渡さない限り、外部の世界からは何もアクセスできません。したがって：

(function($) {
  ...
})(jQuery);

これは、実際の jQuery オブジェクトへの参照を渡していることを意味しますが、関数リテラルのスコープ内では $ として知られています。

于 2012-08-30T17:32:53.673 に答える