javascript - 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 文件的引用时，这不会起作用。

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

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

Answer 1

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

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