18

私はhttp://docs.jquery.com/How_jQuery_Worksを調べて、少しでも$.click()イベントを囲む必要があることを見つけました。$(document).ready()私の困難は次のとおりです。

  • ドキュメントが読み込まれると、コントロールは$(document).ready()関数に入りますが、実行に進み$.click()ますか? （動作に基づいて、そうではありません。しかし、コントロールが通常の機能に入ると、なぜ機能に入らないの$.click()ですか？）
  • ユーザーはドキュメントの準備ができた後にのみ URL を確認できるため、本当に に埋め込む必要が$.click()あるの$(document).ready()でしょうか?
4

5 に答える 5

26

How jQuery Works ドキュメントでは、関数の実行時にイベントがバインドされている要素が作成されていることを確認するために、.click()内部でa をバインドする例を使用しています。$(document).ready().click()

.click()パラメータとして関数を指定して呼び出された は、前のセレクタに一致するノードで を実行するの.click()ではなく、関数を一致するノードの にバインドしますonclick。

次のようなことをしようとした場合:

$('a').click(function(){
  alert('clicked me');
});

...ドキュメント内<head>または要素がレンダリングされる前に、関数が実行された時点でセレクターに<a>一致するノードが存在しなかったため、イベントはどのノードにもバインドされませんでした。$('a')

さらに、いくつかの<a>タグが作成されているときにそれを行うと、既に作成されているものだけがバインドされたイベントを取得します。<a>関数がバインドされた後に作成されたタグにはバインディングがありません.click()。

そのため、jQuery (およびその他の JavaScript フレームワーク) では、イベント ハンドラーを追加したり、ウィジェットをバインドしたりする規則がよく見られます。$(document).ready(function(){});

于 2012-04-10T16:38:06.703 に答える
6

ここで問題になるのは実際の呼び出し.click()ではなく、呼び出される要素のセレクターです。

たとえば、要素がある場合は、次のid="myButton"ように参照します。

$('#myButton')

ただし、その要素がまだ読み込まれていない場合 (つまり、ドキュメントの準備ができておらず、現在読み込まれている要素がわからない場合)、そのセレクターは何も検出しません。そのため、何も呼び出すことはありません(引数に応じて、イベントをバインドしたり、イベントを発生させたりします)。.click().click()

jQuery関数など.on()の他のアプローチを使用できます。これにより、イベントを共通の親要素にバインドし、ドキュメントの後半で追加されたイベントから「バブルアップ」イベントをフィルター処理できます。ただし、通常のセレクターを使用して関数を呼び出しているだけの場合、セレクターは、関数が何かを行うために DOM 内で何かを見つける必要があります。

于 2012-04-10T16:40:45.230 に答える
1

メソッドが解決しようとしている問題$(document).ready(..)は、ページの JavaScript コードの実行と、ページ内のコントロールがバインドされる時間の間の緊張です。ドキュメントのready準備が整い、DOM 要素が利用可能になると関数が起動するため、JavaScript コードは DOM について合理的な仮定を行うことができます。

最も一般的な例は、操作しようとしている DOM 要素に対する JavaScript コードの場所です。検討

<script>
$('#target').click(function() {
  alert('It was clicked');
});
</script>
<div id="target">Click Me</div>

この特定の例では、JavaScript は意図したとおりに機能しません。スクリプト ブロックに入るとclick行が実行され、現在 id を持つ DOM 要素がないtargetため、ハンドラーは何もバインドしません。コードに問題はありません。単に DOM 要素が作成される前に実行するタイミングが悪かっただけです。

この例では、コードと DOM 要素が視覚的にペアになっているため、問題は明らかです。より複雑な Web ページでは、javascript は完全に別のファイルにあることが多く、読み込み順序について視覚的な保証はありません (そうすべきではありません)。抽象化を使用する$(document).ready(..)と、潜在的な問題の原因となる順序付けの問題が取り除かれ、懸念事項の適切な分離が促進されます。

于 2012-04-10T16:43:22.973 に答える
1

はい、クリック ハンドラーを追加する DOM 要素が存在することを確認する必要があります。これは、ドキュメントの準備ができていることでわかっています。

于 2012-04-10T16:38:26.047 に答える
0

JavaScript は通常、タグが読み取られるとすぐに実行を開始します。これは、ヘッドにスクリプトを配置する標準的な方法では、クリック ハンドラーをバインドするための要素がまだ作成されていないことを意味します。body 要素でさえまだ存在しません。jQuery.ready を使用すると、すべての DOM 要素が読み込まれるまでコードの実行が遅れます。

于 2012-04-10T16:41:03.350 に答える