javascript - DOM Ready でアラート ('hi') が予想されますか?

Question

次のコードを使用すると、DOM の準備が整ったときに「こんにちは」という警告メッセージが表示されると思いませんか?

ここにフィドルがあります

html:-

//including jquery
<script data-require="jquery@1.6.4" 
   data-semver="1.6.4" 
   src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>

<script>
  $(document).ready(function(){
    $('.popbox').popbox(); // doesn't this execute the javascript function '$.fn.popbox' ?
  });
</script>



    <div class='popbox'> hi </div>

JavaScript が含まれています:-

(function(){
    $.fn.popbox = function(){    
     alert('hi');
    }
}).call(this)

Answer 1

はい。ただし、jsfiddle では、domReady の後に JavaScript を実行するように設定しますonload。

ここに作業バージョンがあります。

注：頭に追加しました

Answer 2

ドキュメントの準備ができているように見えますが、まったく呼び出されていません。おそらくjqueryが読み込まれませんでしたか？コンソールでエラーを確認します (F12 を押すか、Firefox では control+shift+k を押します)。

これを試すことができます：

//including jquery
<script data-require="jquery@1.6.4" 
   data-semver="1.6.4" 
   src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<div class='popbox'> hi </div>
<script>
  (function(){
    $.fn.popbox = function(){    
      alert('hi');
    }
  }).call(this)
  $('.popbox').popbox();
</script>

Answer 3

「JavaScriptを含む」部分をどこに含めるかによって異なります。JSFiddle では、document.ready の後に実行されているため、失敗しています (コンソール出力を確認してください)。

これは基本的に、document.ready がDOMContentLoadedイベントのショートカットであるためです。window.onloadこれは、フィドルが JavaScript パネルにコードを追加するイベントの前に実行されます。