javascript - DOM 准备好了吗？

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

看起来您的文档准备就绪根本没有被调用。也许jquery没有加载？检查控制台是否有错误（在 Firefox 中按 F12 或 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 2

是的，但是在 jsfiddle 上，您将 javascript 设置onload为在 domReady 之后运行。

这是一个工作版本。

注意：我将它添加到头部

Answer 3

这取决于您在何处包含“包含的 javascript”部分。在你的 JSFiddle 上，它在document.ready 之后运行，所以它失败了（检查你的控制台输出）。

这基本上是因为 document.ready 是DOMContentLoaded事件的快捷方式。它在window.onload事件之前运行，这是您的小提琴在 JavaScript 面板上添加代码的地方。