脚本在Jquery中的位置？

有人能告诉我脚本标记的位置在使用JQuery时很重要吗？脚本在Jquery中的位置？

例如：

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

<a href="http://jquery.com">default click action is prevented</a> 
<div id="log"></div>

根据需要，但下面的作品上面的代码不工作，

<a href="http://jquery.com">default click action is prevented</a> 
<div id="log"></div> 
<script> 
$("a").click(function(event) { 
    event.preventDefault(); 
    $('<div/>') 
     .append('default ' + event.type + ' prevented') 
     .appendTo('#log'); 
}); 
</script>

为什么第二个工作？是否因为代码是从上到下连续工作的？此外，如果第一个代码在.ready()之内，那么位置并不重要。

来源

2011-08-15 Harke

位置确实很重要。在第一种情况下，您将脚本放置在DOM元素之前，这意味着您需要将其包装在document.ready处理程序中，否则在您附加.click处理程序时锚点尚不存在。这里是你如何可以换脚本插入到文档准备的意思是，当整个DOM被加载并可以被操纵的。点击处理程序将只附：

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

<a href="http://jquery.com">default click action is prevented</a> 
<div id="log"></div>

配售脚本在文档的末尾（在结束<body>标签之前）也是一种很好的做法（实际上它是Best Practices for Speeding Up Your Web Site的推荐之一），在这种情况下，您不需要将其包装在document.ready中。

来源

2011-08-15 15:08:24

感谢您的回复。那么，哪一个更好，使用.ready（）并将脚本放在开头或在脚本的末尾写入脚本？ – Harke

@哈克，将脚本放在文档的末尾是推荐的做法。 –

超级感谢！ – Harke

脚本标记的内容在浏览器解析页面时被执行。在您的第一个示例中，代码位于HTML之前。当脚本执行时，包含yhour <a>和<div>的HTML尚未被浏览器解析，因此$('a')失败，因为a尚不存在。

第二个版本可以工作，因为<a>已经被加载/解析并存在于页面的DOM中。

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

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

来源

2011-08-15 15:09:48

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

1）像第二个例子那样做。

2）使用下面的代替。点击（）的

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

这都将锚（新老）绑定到“东西”里面的功能。这个元素还没有添加到DOM中并不重要。

来源

2011-08-15 15:10:04 circusdei

值得注意的是，live（）与bind（）不同。看看警告部分：http://api.jquery.com/live/ – canon

感谢您的回复。使用.live（）或.ready（）更好吗？ – Harke

试试这个，你需要等待直到dom准备就绪。

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

来源

2011-08-15 15:10:11 ShankarSangoli

了jQuery是结合（在这种情况下，结合“点击”事件到“一”的标签）的元素必须已经在DOM加载。否则，当JS运行时，该“a”元素将不存在。

有这三种可能的解决方案：

解决方案1 
把jQuery的在文档的末尾，就像你的第二个例子。

溶液2
包裹$（文件）在JS代码。就绪（）函数，如

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

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

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

，将正常工作。然而，这第三个选项是最不可取的，因为.live（）通过始终关注创建新元素的时候明确强制浏览器做更多的工作。前两个选项中的任何一个都是绝对可取的。

来源

2011-08-15 15:13:19 maxedison

脚本在Jquery中的位置？

回答

相关问题