脚本的位置在Jquery中是否重要？

有人能告诉我脚本标签的位置在使用JQuery时是否重要？

例如：

 $("a").click(function(event) { event.preventDefault(); $('
') .append('default ' + event.type + ' prevented') .appendTo('#log'); });  default click action is prevented 
 

上面的代码不能按需要工作，但以下工作，

 default click action is prevented 
  $("a").click(function(event) { event.preventDefault(); $('
') .append('default ' + event.type + ' prevented') .appendTo('#log'); });  

为什么第二个有效？ 是因为代码是从上到下连续工作的吗？ 此外，如果第一个代码在.ready() ，那么位置无关紧要。

Answer 1

位置很重要。 在第一种情况下，您将脚本放在DOM元素之前，这意味着您需要将它包装在document.ready处理程序中，否则在您附加.click处理程序时，锚点尚不存在。 以下是将脚本打包成文档的方法，这意味着只有在加载完整DOM并准备好操作时才会附加.click处理程序：

  default click action is prevented 
 

将脚本放在文档的末尾（就在关闭标记之前）也是一种很好的做法（实际上它是加速您的网站的最佳实践建议之一），在这种情况下，您不会需要将其包装在document.ready 。

Answer 2

jQuery绑定的元素（在这种情况下，将“click”事件绑定到“a”标记）必须已经加载到DOM中。 否则，当JS运行时，“a”元素将不存在。

有三种可能的解决方案：

解决方案1
将jQuery放在文档的末尾，就像在第二个示例中一样。

解决方案2
将JS代码包装在$（document）.ready（）函数中，例如

 $(document).ready(function(){ //the rest goes in here }); 

解决方案3
最后一个选项是使用jQuery的.live（）方法，它将事件绑定到调用.live（）方法之前和之后创建的任何DOM元素。 例如，如果您的第一个代码片段（在加载“a”元素之前运行JS）更改为

 $('a').live('click',function(){ //click event action }); 

那也行。 但是，第三个选项是最不可取的，因为.live（）肯定会强制浏览器通过始终关注何时创建新元素来完成更多工作。 前两个选项中的任何一个都是绝对可取的。

Answer 3

脚本标记的内容在浏览器解析页面时被浏览器加载时执行。 在您的第一个示例中，代码位于HTML之前。 当脚本执行时，浏览器尚未解析包含yhour 和

的HTML，因此$('a')失败，因为a尚不存在。

第二个版本有效，因为已经被加载/解析并存在于页面的DOM中。

为了解决这个问题，有.ready()函数，它允许您注册一些要执行的代码，但只有在页面的完整DOM准备就绪并可供使用之后。

 $(document).ready(function() { ... your code here ... }); 

Answer 4

在第一个检查中，您的代码在元素存在之前执行。 你可以做以下两件事之一：

1）在第二个例子中做到这一点。

2）使用以下代替.click（）

 $("a").live('click',function(){ // do stuff here }); 

这会将所有锚点（新旧）绑定到函数内的“stuff”。 该元素尚未添加到DOM中并不重要。

Answer 5

试试这个，你需要等待直到dom准备好了。

 $(function() { $("a").click(function(event) { event.preventDefault(); $('
') .append('default ' + event.type + ' prevented') .appendTo('#log'); }); });