JQuery无法处理javascript创建的div

我正在参与Odin项目的这项任务：

我无法获取jQuery。请悬停以处理我创建的div

该项目指定应使用javascript或jquery创建div。我已经这样做了，但无法让任何jquery在javascript创建的div上工作

JS代码如下：

function createGrid(resolution) {
    var wr = document.createElement("div");
    wr.setAttribute("id", "wrapper");
    document.body.appendChild(wr);
    for (x = 0; x<resolution; x++)
        {
        for (i = 0; i<resolution; i++)
        {
            var pix = document.createElement("div");
            pix.setAttribute("class", "pixel"); 
            wr.appendChild(pix);
        };
    var clr = document.createElement("div");
    clr.setAttribute("class", "clearLeft"); 
    wr.appendChild(clr);
    };
};

function getRes(){
    var resolution = prompt("Enter your desired grid resolution.  Number must be between 3 and 64");
if (resolution > 64  || resolution < 3)
    {
        alert("This number is beyond the acceptable range.  Pick a number between 3 and 64")
        getRes();
    }   
createGrid(resolution);
};

//Console is not showing any errors but hover is not working
//after I added the script below
$(document).ready(function(){   
$(".pixel").hover(function(){   
    $(this).css("background-color","black");
    }, function(){
    $(this).css("background-color", "black");
    });
}); 

函数createGrid（分辨率）{
var wr=document.createElement（“div”）；
wr.setAttribute（“id”、“包装器”）；
文件.正文.附件（wr）；
对于（x=0；x，您可以在创建后立即修改函数以添加事件处理程序：

function createGrid(resolution) {
  var wr = document.createElement("div");
  wr.setAttribute("id", "wrapper");
  document.body.appendChild(wr);
  for (x = 0; x<resolution; x++)
    {
      for (i = 0; i<resolution; i++)
      {
        var pix = document.createElement("div");
        pix.setAttribute("class", "pixel"); 
        $(pix).hover(function(){   
           $(this).css("background-color","black");
        }, function(){
           $(this).css("background-color", "black");
        });
        wr.appendChild(pix);
      };
  var clr = document.createElement("div");
  clr.setAttribute("class", "clearLeft"); 
  wr.appendChild(clr);
 };
};

这样，您必须分别绑定
mouseenter
和
mouseleave
的处理程序

$(document).on("mouseenter",".pixel",function (e) {

});
$(document).on("mouseleave",".pixel",function (e) {

});