Question

我知道有人问这个问题，但我找不到问题的答案。所以我在jsFiddle中有一个工作代码，它创建表，然后你选择行，它将该行的颜色变为红色。在jsFiddle中一切正常，在jsFiddle我选择了no-wrap <body>。

但是当我从我的编辑器（netbeans）尝试代码时，它不起作用。我将js代码作为单独的文件和jQuery库添加到头部。

var sestevanje = 1;
var zdaj = new Date(); //nastavimo čas
var dan = ("0" + zdaj.getDate()).slice(-2);
var mesec = ("0" + (zdaj.getMonth() + 1)).slice(-2);
var datum = (dan) + "." + (mesec) + "." + zdaj.getFullYear();

function dodaj() {
   var opNaslov = $("#naslov").val();
   var vrNaslov = $("#vrsta").val();
   var nuOpravila = $("#nujnost").val();
   //var datum = $.datepicker.formatDate('dd.mm.yy', new Date());

   $("#vstavljanje").before("<tr id='nova'><td>" + sestevanje + "</td><td>" + opNaslov + "</td><td>"      + vrNaslov + "</td><td>" + nuOpravila + "</td><td>" + datum + "</td></tr>");

     sestevanje = sestevanje + 1;
   };
    $("table").delegate("tr", "click", function () {
       $(this).addClass("obarva");
    });

    $("#odstrani").click(function () {
       $(".obarva").hide();
    });

Answer 1

...在jsFiddle我选择了no-wrap。

具体来说，您选择了No wrap - in <body>。

但是当我从我的编辑器（netbeans）尝试代码时，它不起作用。我将js代码作为单独的文件和jQuery库，添加到头部。

（我的重点）

这就是问题 - 将它们放在body中，而不是在结束</body>标记之前。

如果你把脚本放在head中，那么body中没有任何DOM元素存在于脚本运行时（因为脚本在遇到它们时运行*，在元素出现之前）遇到并创造了）。但是如果你把脚本放在body的末尾，那么所有的元素都存在，因为它们已经被遇到并被创建了。所以你可以找到它们，将事件处理程序附加到它们等等。

如果将脚本放在head中，您可以使用类似jQuery的ready函数（等待调用代码直到DOM“准备就绪”）），但这确实适用于你无法控制脚本标签放置位置的情况。

* “脚本在遇到时会运行” - 除非您使用async or defer并且浏览器支持它们。

除了特定的理由做其他事情之外，通常的布局（YUI Best Practices和Google's Closure library engineers推荐）是将CSS放入head，脚本放在结束body，类似这样：

<!doctype html>
<html>
<head>
<meta charset="UTF-8"><!-- Or whatever charset you use -->
<title>Your title</title>
<!-- `link` and/or `style` here for your CSS -->
<!-- other `head` content -->
</head>
<body>
<!-- body content -->
<!-- script tags -->
</body>
</html>

如何更改jsFiddle代码，以便它可以在Web浏览器中工作

1 个答案: