Question

我使用Jquery创建了一个简单的函数，它可以工作，但是如果我很快将它导入它就不起作用，例如

<html land="en">
<head>
    <meta carset="utf-8">
    <title> Jquery 2 </title>
</head>

<body>
<!-- Inline is JS in the HTML file -->
<p id="paragraph"> This is a paragraph </p>
<script src="jquery-1.10.2.min.js"></script>
<script src="Tutorial2.js"></script>

</body>
</html>

这样可行，但如果我这样做了

<html land="en">
<head>
    <meta carset="utf-8">
    <script src="jquery-1.10.2.min.js"></script>
    <script src="Tutorial2.js"></script>
    <title> Jquery 2 </title>
</head>

<body>
<!-- Inline is JS in the HTML file -->
<p id="paragraph"> This is a paragraph </p>

</body>
</html>

这不起作用。

是因为我在Tutorial2.js中的函数使用了对p id =“paragraph”的引用，并且在页面之前加载了Javascript文件，该函数不知道我要告诉它访问什么。我的假设是否正确？

Answer 1

是的，这就是原因：当您将事件处理程序绑定到元素时，此元素必须存在。

通常的解决方案是使用$.ready function，它只在DOM准备就绪后才执行回调：

$(function(){
   // your code using the DOM
});

然后你可以把你的代码放在HEAD中。

另一种解决方案，但成本更高，就是在绑定时使用委托：

$(document.body).on('event', 'yourselector'), function(){
      //
});

Answer 2

$(document).ready

这就是你所需要的。

如果很快导入Jquery函数没有结果？

2 个答案: