Question

我用jQuery和外部.js文件写了一个小页面。但它不会加载jQuery部分。我的代码在这里：

<!DOCTYPE html>
<head>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/testScript.js"></script>         
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <button id="testBtn">Oh my Goood...</button>                
    <div id="testDiv">testText</div> 
</body>
</html>

这是我的外部脚本：

alert("no jQuery");
$("button#testBtn").click(function(){
    alert("Works!");
});

如您所见，jQuery将在所有其他脚本之前加载。警报弹出正常。但如果我点击按钮，则没有任何反应。如果我将脚本直接放在html文档中，按钮事件将按预期工作。

我查看了以下问题：Link和Link。但仍然没有按预期工作。

Answer 1

除了使用$(document).ready()方法外，您还可以将您的javascript引用移至页面底部，位于</body>标记的正上方。这是recommended way to include javascript in webpages，因为加载javascript会阻止页面呈现。在这种情况下，它还确保在执行javascript时已经呈现了元素。

Answer 2

您需要在文档内添加单击功能。

$(document).ready(function(){
    $("button#testBtn").click(function(){
       alert("Works!");
    });
});

您的方法失败，因为正在加载页面时正在执行代码，并且尚未加载它引用的元素。使用$(document).ready保持函数执行，直到DOM元素准备就绪。

外部JavaScript不适用于jquery

2 个答案: