BinaryDevelop
  1. ホーム
  2. javascript

$(document).readyコールバックは、具体的にいつ実行されるのですか？

2023-09-24 20:44:47

質問

仮に .click() ハンドラをアンカー ( <a> ) タグを $(document).ready のコールバックで呼び出されます。このハンドラは、デフォルトのアクションをキャンセルします ( href に続く) アクションをキャンセルし、警告を表示します。

私が知りたいのは、コールバックが正確にいつ実行されるかということと、ユーザーがアンカーをクリックしても（ドキュメントはブラウザに表示されています）、イベントがまだ添付されていないということはあり得るのか、ということです。

ここにアンカーを含む異なる HTML ページがありますが、スクリプトを含める順序が異なります。これらの間に違いがあるとすれば、それは何でしょうか。ブラウザによって動作が異なるのでしょうか？

ページ1です。 

<html>
<head>
    <title>Test 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('a').click(function() {
            alert('overriding the default action');
            return false;
        });
    });
    </script>
</head>
<body>
    <a href="http://www.google.com">Test</a>
</body>
</html>

ページ2です。 

<html>
<head>
    <title>Test 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
    <a href="http://www.google.com">Test</a>
    <script type="text/javascript">
    $(function() {
        $('a').click(function() {
            alert('overriding the default action');
            return false;
        });
    });
    </script>
</body>
</html>

ページ3です。 

<html>
<head>
    <title>Test 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <a href="http://www.google.com">Test</a>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('a').click(function() {
            alert('overriding the default action');
            return false;
        });
    });
    </script>
</body>
</html>

では、ユーザがリダイレクトされるのは href にリダイレクトされ、アラートが表示されないということはあり得るのでしょうか？私が提供したどの例でも起こりうることなのでしょうか？

私が必要とするのは、アンカーをクリックしたときに click イベントハンドラがアンカーにアタッチされていることを確認することです。空の href を提供し、javascriptでそれを徐々に強化することができることを知っていますが、これはより一般的な質問です。

HTMLはウェブサーバーによって素早く生成されますが、jqueryライブラリは遠くのサーバーから取得するのに時間がかかる場合、何が起こりますか？これは私のシナリオに影響を与えますか? DOM の読み込みと比較して、スクリプトの組み込みの順序はどうなりますか? これらは並行して行うことができますか？

どのように解決するのですか?

例3 は最も高い確率で は、ハンドラがまだアタッチされていない状態でユーザがリンクをクリックできる可能性が最も高くなります。jQuery ライブラリを読み込んでいるため の後に の後に jQuery ライブラリを読み込んでいるので、Google のサーバーが少し遅い場合（または DNS 検索に 1 秒ほどかかる場合）、またはユーザーのコンピュータが jQuery の処理に遅い場合、ユーザーがリンクをクリックしようとするとクリック ハンドラが添付されません。

この現象が発生する可能性がある別の状況は、非常に大きい、または読み込みが遅いページがあり、このリンクが一番上にある場合です。その場合、DOM の一部が表示されても、完全に準備ができていない可能性があります。このような問題に遭遇している場合。 最も安全なのは をすることです。

  1. でjQueryを読み込む。 head (例1または2)
  2. の直後にクリックイベントをアタッチする。 <a> 要素の直後に、DOMReady コールバック内ではなく、click イベントをアタッチします。このようにすると、すぐに呼び出され、ドキュメントの残りの部分を待つことはありません。

要素がレンダリングされると、DOMから取得することができ、その後jQueryはそれにアクセスすることができます。 

<a href="http://www.google.com">Test</a>
<script type="text/javascript>
    // No (document).ready is needed. The element is availible
    $('a').click(function() {
        alert('overriding the default action');
        return false;
    });
</script>

さらに は、user384915のコメントに基づいて、アクションが完全にJavaScriptに依存している場合、HTMLの一部としてレンダリングすることさえせず、jQueryが準備できた後に追加してください。 

<script type="text/javascript">
jQuery(function($){
   $("<a />", { 
      style: "cursor: pointer", 
      click: function() {
        alert('overriding the default action');
        return false;
      },
      text: "Test"
   }).prependTo("body");
});
</script>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します