jQuery没有参考

Question

我有一个链接。我需要为点击元素编写一个点击函数。 所以我写了这样的代码。

<div class="tabCon">
  <ul>
    <li><a href="javascript:void(0);" id="Overview">Overview</a></li>
    <li><a href="javascript:void(0);" id="ProjDet">Project Details</a></li>
    <li><a href="javascript:void(0);" id="Directions">Directions</a></li>                                         
  </ul>
<div>

我写了一个js文件，里面写了很多函数。

$('.tabCon > ul > li > a').click(function() { 
   alert('Link Clicked !');
});

但是当我在 head 部分中声明此 JavaScript 文件的引用时，这不会起作用。

当我在元素下方或 body 结束标记之前声明时，此有效

为什么会发生这种情况？还有其他办法吗？

Answer 1

如果将 jQuery 代码放在 head 部分，请确保在 document.ready 处理程序中执行 jQuery 代码，否则当您尝试将单击处理程序附加到某个元素时，DOM 可能尚未加载并准备好进行操作：

$(function() {
    $('.tabCon > ul > li > a').click(function() { 
       alert('Link Clicked !');
    });
});

Answer 2

因为如果将其添加到 head 中，则该元素尚未在 DOM 中创建，因此您无法通过 JavaScript 将其作为对象访问！

$(document).ready(function () {
  $('.tabCon > ul > li > a').click(function() { 
   alert('Link Clicked !');
  });
});

试试上面的方法吧！

Answer 3

当解析器位于 head 时，该元素不存在于 DOM 中，但是当它（javascript 解析器）到达结束 body 标记时，它就存在了。因此。

Answer 4

确保您的 document.ready 事件中有 jQuery 调用。

基本上，如果您在 HEAD 块中编写 jQuery，请将整个内容包装在

$(function() {

//jquery code goes here

});

Answer 5

你有没有把这个函数 $("...").click(...);在 $(function(){ ... } 块中，以便在加载页面时它处于活动状态。如果没有，这是正常的，这将不起作用。尝试将您的函数放在 $(function(){ 中。 .. } 块，它会起作用

。