Why won't my jQuery code run?

Question

First off, I apologize for the extremely elementary question. I am a complete newbie and have been teaching myself without any outside help. Be gentle.

I am completing an exercise from a free web dev course, and one of the steps is to add background color to some divs using jQuery. I have used both .hover and .mouseover methods, but neither are working. If I put the code outside of the $(document).ready brackets, nothing happens. If I put the code inside of it, all of my work looks like it's erased.

Here's the code:

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

Inside the $(document).ready function I created lots of divs with class="pixel", so I figured I should be able to select them using the above code.

Edit:

Again, I am sorry it seems I'm not including enough information. This is literally my first attempt at posting something here. I have nobody I can ask these questions to.

Here is the beginning of my .js file, before the .hover code I'm trying to run:

$(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

Two options - you can either initialize your hover event after creating the elements, or even better, you can use jQuery .on('mouseover') and .on('mouseout') and initialize the event before the elements are created:

 $(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> 

Or, the version still using the shorthand 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> 

Answer 2

The issue is that you're appending the element you're trying to hover. Because it's not part of the DOM on page load, the event binding won't work the way you have it. Instead use:

 $(document).ready(function(){ $("body").append("<div id='main'>"); for(var i=0; i<256; i++) { $("#main").append("<div class='pixel'>Pixel</div>"); }; $(".pixel").last().append("</div>"); }); // Change BG on hover $(document).on({ mouseenter: function(){ $(this).css("background-color", "yellow"); }, mouseleave: function(){ $(this).css("background-color", "red"); } }, '.pixel'); 

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