保持javascript外部 - 不起作用

anc*_*evv 1 html javascript jquery

当我保持我的javascript/jquery外部时,我的代码不起作用.但是当我在我的html文件中将它们组合时,一切都很好.

有什么建议吗?

这是代码:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
       <script type ="text/javascript" src="jquery.js"></script>  
       <script type ="text/javascript" src="program.js"></script>
</head>
<body>
    <div id="clickme">
    Click here
    </div>

    <img id="book" src="book.png" alt="" width="100" height="123" />

    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Yet one more Paragraph</p>

</body> 
</html>
Run Code Online (Sandbox Code Playgroud)

与外部JavaScript

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});
$("p").click(function () {
     $(this).slideUp();
   });
Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
    <script type ="text/javascript" src="jquery.js"></script>  
</head>
<body>

    <div id="clickme">
        Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />

    <p>First Paragraph</p>
    <p>Second Paragraph</p>  
    <p>Yet one more Paragraph</p>


    <script>
        $('#clickme').click(function() {
      $('#book').fadeOut('slow', function() {
     // Animation complete.
     });
     });

    $("p").click(function () {
    $(this).slideUp();
     });


    </script>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Shy*_*yju 13

我猜你在DOM完成加载之前执行click事件.将代码包装在dom ready事件中,它应该可以工作,假设你的外部javascript文件的路径是正确的.

$(function(){

   $('#clickme').click(function() {
     $('#book').fadeOut('slow', function() {
       // Animation complete.
     });
   });
   $("p").click(function () {
      $(this).slideUp();
   });
});
Run Code Online (Sandbox Code Playgroud)

如果遇到任何脚本错误,请始终使用firebug(控制台)查看脚本有什么问题.


Oli*_*ver 6

您的javascript在页面上有元素之前执行.您可以通过使用$(document).ready(function(){...});或移动外部JavaScript文件到底部来解决这个问题.


Zef*_*ryn 5

将您的 js 代码包装在外部文件中

$(document).ready(function(){

    //your code goes here

});
Run Code Online (Sandbox Code Playgroud)

现在,您在标头中包含外部 js 文件并执行它。此时没有元素 so$('#clickme')并且$("p")是空集。在第二个示例中,您在使用该元素呈现 html 后运行此代码。