Question

此代码显示一个彩色单元格网格，可在mouseenter上更改颜色，留下新颜色的单元格。按钮使用原始颜色的单元格重新加载网格。问题是mouseenter颜色更改仅在第一次网格加载（页面刷新）后有效，但在单击“创建新网格”按钮后不在后续加载时有效。

我是javascript和jQuery的新手，虽然我已经阅读过课堂资料并阅读了一些关于如何做各种部分的文章，但我看不出有什么问题。

访问jsfiddle here.

var gridWidth = 600;
var fillGrid = function(){
    $('.grid').empty();
  var cellsPer = prompt('How many cells would you like in a side?');
  console.log('cellsPer = ' + cellsPer);
  var cellWidth = (gridWidth / cellsPer) - 1;
    console.log('cellSize = ' + cellWidth);

  var cell = "<div class='cell'></div>";
  for (var i = 0; i < cellsPer**2; i++) {
    $('.grid').append(cell);
  };
  $('.cell').css({
    'background':'blue','height': cellWidth+'px',  'width': cellWidth+'px',
    'float':'left','margin': '0 1px 1px 0'
  });
};

$(document).ready(function() {
  fillGrid();

  $('.grid').css({'width': gridWidth+'px'});

  $('button').click(function(){
        fillGrid();
    });

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

Answer 1

您只需在mouseenter上添加$(document).ready事件侦听器一次。调用fillGrid()后，一组未绑定到'.cell'事件的新mouseenter元素会添加到DOM中。

你必须告诉他们再次表现相同。

请参阅以下剪辑：

＆＃13;

var gridWidth = 600;
var fillGrid = function(){
	$('.grid').empty();
  var cellsPer = prompt('How many cells would you like in a side?');
  console.log('cellsPer = ' + cellsPer);
  var cellWidth = (gridWidth / cellsPer) - 1;
	console.log('cellSize = ' + cellWidth);

  var cell = "<div class='cell'></div>";
  for (var i = 0; i < cellsPer**2; i++) {
    $('.grid').append(cell);
  };
  $('.cell').css({
  	'background':'blue','height': cellWidth+'px',  'width': cellWidth+'px',
    'float':'left','margin': '0 1px 1px 0'
  });
  
  $('.cell').mouseenter(function() {
  	$(this).css('background','pink');
  });
};

$(document).ready(function() {
	fillGrid();

	$('.grid').css({'width': gridWidth+'px'});

  $('button').click(function(){
		fillGrid();
	});
});

＆＃13;

button{
  display:block;
  margin:5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Create New Grid</button>
  <div class="grid"></div>

＆＃13;

Answer 2

将其移至$(document).ready功能之外，并将鼠标输入功能添加为

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

Answer 3

我注意到这个代码的两个问题
1）cellsPer ** 2无效。使用Math.pow或cellsPer * cellsPer
2）您只是在document.ready上设置鼠标输入监听器。在网格上调用empty将删除所有子元素 - 附加事件侦听器和所有子元素。这意味着每次重新初始化网格时都需要重新添加事件侦听器。

以下是一个更新的代码段，只需极少的更改即可让您的代码正常运行：

var gridWidth = 600;
var fillGrid = function(){
  $('.grid').empty();
  var cellsPer = prompt('How many cells would you like in a side?');
  console.log('cellsPer = ' + cellsPer);
  var cellWidth = (gridWidth / cellsPer) - 1;
  console.log('cellSize = ' + cellWidth);

  var cell = "<div class='cell'></div>";
  for (var i = 0; i < cellsPer * cellsPer; i++) {
    $('.grid').append(cell);
  };
  $('.cell').css({
  	'background':'blue','height': cellWidth+'px',  'width': cellWidth+'px',
    'float':'left','margin': '0 1px 1px 0'
  });
};

$(document).ready(function() {
  fillGrid();

  $('.grid').css({'width': gridWidth+'px'});

  $('button').click(function(){
    fillGrid();
    $('.cell').mouseenter(function() {
      $(this).css('background','pink');
    });
  });
  
  $('.cell').mouseenter(function() {  
    $(this).css('background','pink');
  });
});

button{
  display:block;
  margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Create New Grid</button>
<div class="grid"></div>

因为你正在为一个类做这个我不打算重构代码但是，我要做的另一个建议是在fillGrid函数中添加事件监听器，这样你就可以整齐地封装所有的东西在一个地方与网格有关。

jQuery mouseenter仅适用于首页加载

3 个答案: