1. ホーム
  2. ジャバスクリプト

[解決済み] [Solved] jQuery - 複数の $(document).ready ...?

2022-03-24 12:44:39

質問

質問です。

2つのJavaScriptファイルをリンクする場合、両方とも $(document).ready 関数はどうなるのでしょうか?一方が他方を上書きするのでしょうか?それとも、両方の $(document).ready が呼び出されるのでしょうか?

例えば

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js :

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});



この2つの呼び出しを単純に1つの $(document).ready が、私の状況ではちょっと無理です。

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

すべて実行されます そして、初回限定生産。

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

デモ ご覧の通り、これらは互いに置き換えられるものではありません。

また、1つ言っておきたいことがあります。

の代わりに

$(document).ready(function(){});

このショートカットを使用することができます。

jQuery(function(){
   //dom ready codes
});