Функция JQuery, которая должна быть отключена только на go для определенного класса, продолжает срабатывать, даже если класс был удален из тега - PullRequest
Новая
       1

Функция JQuery, которая должна быть отключена только на go для определенного класса, продолжает срабатывать, даже если класс был удален из тега

0 голосов
/ 13 февраля 2020

Просто начиная с Jquery, у меня есть функция, которая добавляет поле ввода ниже другого. Я хочу, чтобы это происходило только с самым последним, поэтому я установил класс на новый, который был создан, и удалил тег из предыдущего. Однако функция работает только с тегом, в котором изначально был класс. Вот код: 

<html>
<body>
     <div id="inputs">
        <input type="text" class="input" placeholder="Enter text"><br>
        <input type="text" class="appending-input" placeholder="Enter text"><br>
     </div>

     <script>
      $(document).ready(function(){  
        $(".appending-input").keydown( function() {
          $(".appending-input").attr("class", "input");
          $("#inputs").append('<input type="text" class="appending-input" placeholder="Enter text"><br>')
        });
      });
     </script>

</body>
</html>

Не возможно ли изменить класс на тегах, чтобы функция не выполнялась. Или есть лучший способ сделать это?

Ответы [ 2 ]

0 голосов
/ 13 февраля 2020

Если вы хотите, чтобы типы ввода добавлялись только при заполнении последнего типа ввода, используйте .on для привязки функции к динамическому c созданному типу ввода. 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
 <div id="inputs">
    <input type="text" class="input" placeholder="Enter text"><br>
    <input type="text" class="appending-input" placeholder="Enter text"><br>
 </div>

 <script>
  $(document).ready(function(){  
   $(document).on('keydown', '.appending-input', function() {
      $(".appending-input").attr("class", "input");
      $("#inputs").append('<input type="text" class="appending-input" placeholder="Enter text"><br>')
    });
  });
 </script>

0 голосов
/ 13 февраля 2020

Проблема в том, что, хотя у события больше нет класса, обработчик событий все еще привязан к нему.

Если вы хотите, чтобы событие запускалось только один раз, вы можете использовать one() вместо: 

jQuery(function($) {
  $(".appending-input").one('keydown', function() {
    $(this).prop("class", "input");
    $("#inputs").append('<input type="text" class="appending-input" placeholder="Enter text"><br>')
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inputs">
  <input type="text" class="input" placeholder="Enter text"><br />
  <input type="text" class="appending-input" placeholder="Enter text"><br />
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...