Question

我的第二个功能没有触发，我不知道为什么。当我单击任何.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>

Answer 1

问题是您正在添加事件侦听器之后创建元素。试试这个吧。

$(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");

    });

    });


});

我正在做的是在创建元素后立即添加事件监听器，以便将其应用于元素。

Answer 2

因为在更新DOM之前将click事件添加到.virada元素。因此，您必须像这样进行第二次点击事件：

 $(document).on('click', '.virada', function() {
      //DO YOUR WORK HERE
      $(this).addClass("bomba").removeClass("virada");
      $(this).html("2");
 });

jQuery .click事件未触发

2 个答案: