因此，我正在尝试使用 jQuery 创建一个程序，该程序基本上会创建一个画板，当鼠标悬停在每个框上时，每个框都会变成红色。
function createGrid(rows, columns){
var container = '<div id="container"></div>';
$('body').append(container);
var row = ('<div class="row"></div>');
for(var i = 0; i < rows; i++) {
console.log(i);
$('#container').append(row);
}
var column = ('<div class="square"></div>');
for(var a = 0; a < columns; a++) {
$('.row').append(column);
}
}
function newGrid(){
$('#container').remove();
var rows = prompt("How many rows?");
var columns = prompt("How many columns?");
createGrid(rows, columns);
}
$(document).ready(function(){
createGrid(16,16);
$('#newgrid').on('click', function(){
newGrid();
});
$('.square').on('mouseover', function(){
$(this).addClass('painted');
});
});.square{
height: 20px;
width: 20px;
border: 1px solid black;
display: inline-block;
margin-right: 5px;
}
.painted{
background-color: red;
}
button{
margin-bottom: 10px;
}<!doctype html>
<html>
<head>
<title>Draw</title>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="draw.js"></script>
<link rel="stylesheet" href="draw.css"/>
</head>
<body>
<button id="newgrid">New Grid</button>
</body>
</html>当您单击“新网格”按钮时，网格应适应新的网格大小参数。然而，在那之后，网格没有响应我的鼠标悬停事件。我怎样才能解决这个问题？
最佳答案
重新创建网格后，带有附加事件处理程序的元素将丢失。
每次重新创建网格时都需要重新绑定(bind)事件处理程序:
function createGrid(rows, columns){
var container = $('<div id="container"></div>'); // make it a jQuery object
$('body').append(container);
var row = ('<div class="row"></div>');
for(var i = 0; i < rows; i++) {
console.log(i);
$('#container').append(row);
}
var column = ('<div class="square"></div>');
for(var a = 0; a < columns; a++) {
$('.row').append(column);
}
// attach event handler only to the ancestors of the new container
// so you don't add additional event handlers to could be existing other grids
container.find('.square').on('mouseover', function(){
$(this).addClass('painted');
});
}
你也可以只使用 delegated events :
$(document).on('mouseover', '.square', function(){
$(this).addClass('painted');
});
在这种情况下，您甚至不需要将其添加到就绪回调中。
关于javascript - 鼠标悬停事件处理程序不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32513472/