Jquery .click 事件未触发答案

【问题标题】：Jquery .click event not triggeringJquery .click 事件未触发
【发布时间】：2019-02-23 00:56:05
【问题描述】：

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

【问题讨论】：

你没有任何.virada div

标签： jquery events triggers click

【解决方案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");

    });

    });


});

我所做的是在创建元素后直接添加事件侦听器，以便将其应用于元素。

【讨论】：

【解决方案2】：

因为您在更新 DOM 之前向 .virada 元素添加了点击事件。所以你必须像这样进行第二次点击事件：

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

【讨论】：