Question

所以，我用HTML编写了这段代码，我试图使用像hide（）这样的基本JQuery函数。虽然内联JQuery工作正常，但外部JQuery代码根本不起作用。这是HTML文件的代码 -

<html>
    <head>
        <script src="jq.js"></script>
        <script src="JS.js"></script>
    </head>
    <body>
        <p id='paragraph'>This is a paragraph</p>
        <p onclick="$(this).hide()">This is second</p>
    </body>
</html>

外部JQuery代码所在的jq.JS fiel的代码 -

$('#paragraph').click(function(){
   $('#paragraph').hide();
});

Answer 1

在您将段落添加到DOM之前，您的JavaScript（因为<script>标记所在的位置）已运行。

它没有找到该段落（因为它尚未存在），因此它将您的点击处理程序绑定为空。

将脚本移动到段落之后（或将其包装在函数中并在获得DOMReady或load事件时运行该函数）。

Answer 2

将您的代码包含在$(document).ready()

中

$(document).ready(function(){
    $('#paragraph').click(function(){
       $('#paragraph').hide();
    });
});

这样，里面的jQuery代码只有在DOM就绪时才会运行。

读取：$(document).ready() | jQuery Learning Center

Answer 3

您可以在它之前附加它，以便在渲染完所有元素后运行它。

如果您正确构建代码，则页面上的位置无关紧要。

$(document).ready(function(){
   $('#paragraph').click(function(){
      $('#paragraph').hide();
   });
});

如果您使用上面的代码，您可以在头部之前保留对js文件的引用！

Answer 4

请检查是否附加了js文件，并在JQUERY的代码中添加此

$(document).ready(function()
{
   $('#paragraph').click(function(){
       $('#paragraph').hide();
    });
});

这样它将在DOM准备就绪时运行

Answer 5

@Cerlin Boss确实是对的：

$(document).ready(function(){
    $('#paragraph').click(function(){
        $('#paragraph').hide();
    });
});

可行 - 请参阅fiddle

外部JQuery无法正常工作

5 个答案: