Добавить элемент списка, используя JQuery с событием закрытия - PullRequest
Новая
       8

Добавить элемент списка, используя JQuery с событием закрытия

0 голосов
/ 09 июля 2020

Я хочу добавить к новому элементу списка флажок, поле ввода и кнопку закрытия, когда я нажимаю «+ Элемент списка» и нажимаю клавишу ввода в поле ввода. Например: событие отмеченного элемента Google Keep работает в заметках.

В этом коде, когда я нажимаю клавишу ввода в поле ввода, он работает нормально, и он также добавляет новый элемент списка, когда я нажимаю «+ Элемент списка» . Но здесь я столкнулся с некоторой проблемой. Когда я добавляю новый элемент списка, щелкая «+ элемент списка», а затем я нажимаю элемент списка в любом месте, затем он снова добавляет новый элемент списка.

Я хочу сделать список как список пункт. Я хочу, чтобы он добавлял элемент списка, когда я нажимаю клавишу ВВОД или когда нажимаю только «+ Элемент списка». 

$( "#list_item" ).keypress(function(e) {
  var key = e.keyCode ? e.keyCode : e.which;
  if(key == '13'){
    $('#list_item').prepend('<li><input type="checkbox" name="checkb"><input type="text" name="txt" class="inpt"><span aria-hidden="true" class="ml-2">&times;</span></li><br>');
  }
});

$("#add-list").click(function(){
  $('#add-list').prepend('<li><input type="checkbox" name="checkb"><input type="text" name="txt" class="inpt" ><span aria-hidden="true" class="ml-2">&times;</span></li><br>');
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

</head>
<body>
  <div class="row">
   
    <div class="col-md-12">
      <div class="row" id="note" style="display: block">
        <div class="col-md-4" style="cursor:pointer;">
          <div class="card mt-5 popup popuptext" onclick="myFunction()">
            
              <div class="card-body">
                    
                      <p class="card-text mt-4">
                        <ul id="list_item" class="list-unstyled ml-3">
                          <li><input type="checkbox" name="checkb"><input type="text" name="txt" class="inpt" ><span aria-hidden="true" class="ml-2">&times;</span></li><br>
                          <li id="add-list" style="cursor:pointer;"> + List item </li>
                        </ul>
                      </p>

              </div>
             
          </div>
        </div>
      </div>
   
  </div>
  
</body>
</html>

1 Ответ

1 голос
/ 09 июля 2020

С prepend() вы фактически добавляете строку флажка внутри элемента add-list li. Таким образом, вы делаете элемент add-list li более крупной целью каждый раз, когда нажимаете на него.

Поместите свой add-list элемент за пределы ul и используйте append(). 

$( "#my-list" ).keypress( function(e) {
    var key = e.keyCode ? e.keyCode : e.which;
    if ( key == '13' ) {
        addListItem()
    }
});

$( "#add-list" ).click( function() {
  addListItem();
});

function addListItem() {
    $('#my-list').append('<li><input type="checkbox"><input type="text"><span>&times;</span></li>');
}
ul { 
  list-style: none; 
  padding: 0; 
}

button { margin-top: 10px; }

li { margin-bottom: 10px; }

li span, 
li input[type="text"] { 
  margin-left: 10px; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="my-list">
    <li><input type="checkbox"><input type="text"><span>&times;</span></li>
</ul>
<button id="add-list"> + List item </button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...