Javascript jQuery mouseenter仅在第一页加载时有效

这段代码显示一个彩色单元格的网格，这些单元格在鼠标指针上改变颜色，留下一条新颜色单元格的轨迹。按钮将使用原始颜色的单元格重新加载网格。问题是，鼠标指针颜色更改仅在第一次加载网格（页面刷新时）后有效，但在单击“创建新网格”按钮后的后续加载中无效

我不熟悉javascript和jQuery，虽然我已经阅读了课程材料，并阅读了一些关于如何实现这一点的文章，但我看不出有什么错

参观

var gridWidth=600；
var fillGrid=function（）{
$（'.grid'）.empty（）；
var cellsPer=prompt（'您希望一个侧面有多少个单元格？'）；
log（'cellsPer='+cellsPer）；
var cellWidth=（gridWidth/cellsPer）-1；
log（'cellSize='+cellWidth）；
var cell=“”；
对于（变量i=0；i

您可以在

$（document.ready

上只添加一次

鼠标事件监听器。
当调用
fillGrid（）
时，一组新的
'.cell'
元素（未绑定到
mouseenter
事件）将添加到DOM中

你必须告诉他们再这样做

请参见以下截图：


var gridWidth=600；
var fillGrid=function（）{
$（'.grid'）.empty（）；
var cellsPer=prompt（'您希望一个侧面有多少个单元格？'）；
log（'cellsPer='+cellsPer）；
var cellWidth=（gridWidth/cellsPer）-1；
log（'cellSize='+cellWidth）；
var cell=“”；
对于（变量i=0；i
按钮{
显示：块；
保证金：5px；
}

创建新网格
您可以在
$（document.ready
上只添加一次
鼠标事件监听器。
当调用
fillGrid（）
时，一组新的
'.cell'
元素（未绑定到
mouseenter
事件）将添加到DOM中

你必须告诉他们再这样做

请参见以下截图：


var gridWidth=600；
var fillGrid=function（）{
$（'.grid'）.empty（）；
var cellsPer=prompt（'您希望一个侧面有多少个单元格？'）；
log（'cellsPer='+cellsPer）；
var cellWidth=（gridWidth/cellsPer）-1；
log（'cellSize='+cellWidth）；
var cell=“”；
对于（变量i=0；i
按钮{
显示：块；
保证金：5px；
}

创建新网格
将其移出
$（文档）。准备好
功能并添加鼠标输入功能，如下所示

' $(document).on('mouseenter','.cell',function() {
   $(this).css('background','pink');
  });' 

将其移到
$（文档）之外。准备好
功能并添加鼠标输入功能，如下所示

' $(document).on('mouseenter','.cell',function() {
   $(this).css('background','pink');
  });' 

我注意到此代码存在两个问题

1） 
cellsPer**2
无效。使用
Math.pow
或
cellsPer*cellsPer


2） 您仅在document.ready上设置鼠标输入侦听器。在网格上调用
empty
将删除所有子元素-附加的事件侦听器和所有子元素。这意味着您需要在每次重新初始化网格时重新添加事件侦听器

以下是一个经过更新的代码段，其中对代码进行了最小的更改，以使代码正常工作：


var gridWidth=600；
var fillGrid=function（）{
$（'.grid'）.empty（）；
var cellsPer=prompt（'您希望一个侧面有多少个单元格？'）；
log（'cellsPer='+cellsPer）；
var cellWidth=（gridWidth/cellsPer）-1；
log（'cellSize='+cellWidth）；
var cell=“”；
对于（变量i=0；i
按钮{
显示：块；
保证金：5px；
}

创建新网格
我注意到此代码存在两个问题

1） 
cellsPer**2
无效。使用
Math.pow
或
cellsPer*cellsPer


2） 您仅在document.ready上设置鼠标输入侦听器。在网格上调用
empty
将删除所有子元素-附加的事件侦听器和所有子元素。这意味着您需要在每次重新初始化网格时重新添加事件侦听器

以下是一个经过更新的代码段，其中对代码进行了最小的更改，以使代码正常工作：


var gridWidth=600；
var fillGrid=function（）{
$（'.grid'）.empty（）；
var cellsPer=prompt（'多少个c