javascript - 为什么我的 jQuery 代码不能运行？

Question

首先，对于这个极其初级的问题，我深表歉意。我是一个完全的新手，在没有任何外界帮助的情况下一直在自学。温柔一点。

我正在完成一个免费网络开发类(class)的练习，其中一个步骤是使用 jQuery 为一些 div 添加背景颜色。我同时使用了 .hover 和 .mouseover 方法，但都不起作用。如果我将代码放在 $(document).ready 括号之外，则什么也不会发生。如果我将代码放入其中，我所有的工作看起来都被删除了。

代码如下:

$(".pixel").hover(function(){
  $(this).css("background-color", "yellow");
}, function() {
  $(this).css("background-color", "red");
});

在 $(document).ready 函数中，我用 class="pixel"创建了很多 div，所以我想我应该能够使用上面的代码选择它们。

编辑:

再次抱歉，我似乎没有包含足够的信息。这实际上是我第一次尝试在这里发布内容。我没有人可以问这些问题。

这是我的 .js 文件的开头，在我尝试运行的 .hover 代码之前:

$(document).ready(function() {
  $("body").append("<div id='main'>");
  for (var i=0; i<256; i++) {
    $("#main").append("<div class='pixel'></div>");
  };
  $(".pixel").last().append("</div>");
});

Answer 1

两个选项 - 您可以在创建元素后初始化您的 hover 事件，或者更好的是，您可以使用 jQuery .on('mouseover') 和 .on('mouseout') 并在创建元素之前初始化事件:

$(document).on("mouseover", ".pixel", function() {
  $(this).css("background-color", "yellow");
}).on("mouseout", ".pixel", function() {
  $(this).css("background-color", "red");
});

$("body").append("<div id='main'>");

for (var i = 0; i < 256; i++) {
  $("#main").append("<div class='pixel'></div>");
};

.pixel {
  border: 1px solid #000;
  display: inline-block;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者，版本仍然使用简写hover:

$("body").append("<div id='main'>");

for (var i = 0; i < 256; i++) {
  $("#main").append("<div class='pixel'></div>");
};

$(".pixel").hover(function() {
  $(this).css("background-color", "yellow");
}, function() {
  $(this).css("background-color", "red");
});

.pixel {
  border: 1px solid #000;
  display: inline-block;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>