Кнопка добавления должна видеть, есть ли в поле какие-либо данные?Функция onkeyup не запускается каждый раз. Моя цель - создать список дел

Question

По умолчанию одно поле ввода. При нажатии кнопки добавления будут добавлены новые поля ввода.

    
          <div>
          <ul id="new">
            <li id="try"><input type="checkbox"><input class="set field" name="list" type="text" value=""></li>
         </ul>
          </div>     
          <div>
            <button id="btn1">add</button>
            <button id="btn2" type="submit" value="submit">Save</button>

функция onkeyup в первый раз работает, но после этого она не запускается

$(document).ready(function() {
            $('#btn1').hide();
             $('.field').on('keyup',function(){
      
             var search_text = $('.field').val();
           if(search_text==""){
   
            $('#btn1').hide();

          }else{
          $('#btn1').show();
          }
          });
          $("#btn1").click(function () {
                var x = 1;
                event.preventDefault();
                x++;   
                $('#new').append('<li id="try"><input type="checkbox"><input name="list[]" class="set field" type="text" value=""></li>');  
          $('#btn1').hide();
             
           });
           });

Answer 1

При создании элементов вы всегда должны давать им уникальные идентификаторы, если вы их используете. Добавление элементов с одинаковым идентификатором приведет к конфликтам и неожиданному поведению.

<div>
    <ul id="new">
        <li id="try-0"><input type="checkbox"><input class="set field" name="list" type="text" value=""></li>
    </ul>
</div>     
<div>
    <button id="btn1">add</button>
    <button id="btn2" type="submit" value="submit">Save</button>
</div>

Ваши основные ошибки были

1. Не имеет уникальных идентификаторов и

   2.Ваше событие key up не подходит для динамически создаваемых элементов.

   $(document).ready(function() {
       var x = 1; // Set to 1 on document load, not every add
       $('#btn1').hide();
       $('body').on('keyup', '.field', function(){
           var search_text = $('.field').last().val(); //finds last added .field and checks if blank
           // this allows other inputs to have their values changed while not triggering the show button
           if(search_text==""){
               $('#btn1').hide();
           }else{
               $('#btn1').show();
           }
       });
       $("#btn1").click(function (event) { //need to pass event if you want to use it
           event.preventDefault();  
           $('#new').append('<li id="try-'+x+'"><input type="checkbox"><input name="list[]" class="set field" type="text" value=""></li>');
           // ID now contains x variable that increments every add 
           $('#btn1').hide();
           x++; // increment x now at bottom so increments after field has been added.    
       });
   });
   

Answer 2

<ul id="new">
    <li id="try"><input type="checkbox"><input class="set field" name="list" type="text" value=""></li>
</ul>
<button id="btn" type="submit" value="submit" hidden="">Save</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$("input[name='list']").keyup(function(event) {
  if($(this).val() != ""){
    $("#btn").show();
  }
});
$(document).on('click', '#btn', function(event) {
    var val = '';
    var val = $("input[name='list']").val();
    $("#try").before('<li>'+val+'</li>');
    $("input[name='list']").val("");
    $("input[name='list']").removeAttr('value');
    $("#btn").hide();
});
</script>