我的第二个功能是没有开火，我不知道为什么。当我点击任何.virada div时，它应该改变颜色，但事实并非如此。我开始使用PHP和JS开发这个，但是因为我已经迁移到只在JS中编码，所以这个事件不起作用。请帮忙。
$(document).ready(
function() {
$("#enviar").click(function() {
var lar = $("#largura").val();
var alt = $("#altura").val();
var msg = "<table>";
for (var i = 0; i < alt; i++) {
msg += "<tr>";
for (var o = 0; o < lar; o++) {
msg += "<td><div class=virada id='" + o + "" + i + "'></div></td>";
}
msg += "</tr>";
}
msg += "</table>";
$("#quadro").html(msg);
});
$(".virada").click(function() {
$(this).addClass("bomba").removeClass("virada");
$(this).html("2");
});
});<html>
<head>
<META CHARSET="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="Css.css" type="text/css" />
</head>
<body>
<form>
Largura:<input type=text id=largura> Altura:
<input type=text id=altura> Nº Bombas:<input type=text id=bombas>
<input type='button' id=enviar value='Enviar'>
</form>
<div id=janela>
<div id=quadro>
</div>
</div>
<div id=mensagemfinal>
</div>
</body>
</html>问题是您在添加事件侦听器后创建了元素。试试这个。
$(document).ready(function(){
$("#enviar").click(function(){
var lar = $("#largura").val();
var alt = $("#altura").val();
var msg = "<table>";
for(var i=0;i<alt;i++){
msg += "<tr>";
for(var o=0;o<lar;o++)
{
msg += "<td><div class=virada id='"+o+""+i+"'></div></td>";
}
msg += "</tr>";
}
msg += "</table>";
$("#quadro").html(msg);
//adding the event listener after adding the element so that it aqcuires the event.
$(".virada").click(function(){
$(this).addClass("bomba").removeClass("virada");
$(this).html("2");
});
});
});
我正在做的是在创建元素后直接添加事件侦听器，以便将其应用于元素。
因为您在更新DOM之前将click事件添加到.virada元素。所以你必须像这样做第二次点击事件：
$(document).on('click', '.virada', function() {
//DO YOUR WORK HERE
$(this).addClass("bomba").removeClass("virada");
$(this).html("2");
});