Question

有人可以告诉我，在使用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()内，则位置无关紧要。

Answer 1

位置确实很重要。在第一种情况下，您将脚本放在DOM元素之前，这意味着您需要将其包装在document.ready处理程序中，否则当您附加.click处理程序时，锚点还没有存在。以下是如何将脚本包装到文档中，这意味着只有在加载完整DOM并准备好操作时才会附加.click处理程序：

<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的推荐之一），在这种情况下，你不要＃39; t需要将其包装在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之前。当脚本执行时，浏览器尚未解析包含小时<a>和<div>的HTML，因此您$('a')失败，因为a尚不存在。

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

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

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

Answer 4

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

1）在第二个例子中这样做。

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

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

这会将所有锚点（new和old）绑定到函数内的“stuff”。该元素尚未添加到DOM中无关紧要。

Answer 5

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

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

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

5 个答案: