Question

所以我正在尝试用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>

单击“新网格”按钮时，网格应适应新的网格大小参数。但是，在那之后，网格没有响应我的鼠标悬停事件。我怎样才能解决这个问题？

Answer 1

重新创建网格后，带有附加事件处理程序的元素将丢失。

每次重新创建网格时都需要重新绑定事件处理程序：

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');
});

在这种情况下，您甚至不需要将其添加到准备好的回调中。

mouseover事件处理程序无法正常工作

1 个答案: