Событие Jquery .click не запускается - PullRequest
Новая
       36

Событие Jquery .click не запускается

0 голосов
/ 23 февраля 2019

Моя вторая функция не срабатывает, я не знаю почему.Когда я нажимаю на любой .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>

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Поскольку вы добавляете событие click к элементу .virada, перед обновлением DOM.Таким образом, вы должны сделать событие второго клика следующим образом: 

 $(document).on('click', '.virada', function() {
      //DO YOUR WORK HERE
      $(this).addClass("bomba").removeClass("virada");
      $(this).html("2");
 });
0 голосов
/ 23 февраля 2019

Проблема в том, что вы создаете элемент после добавления прослушивателя событий.Попробуйте вместо этого. 

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

    });

    });


});

Что я делаю, так это добавляю прослушиватель событий сразу после создания элемента, чтобы он применялся к элементу.

...