javascript - 如果该字段有任何数据，应该可以看到添加按钮？ 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

创建元素时，如果您正在使用它们，则应始终为它们提供唯一的 ID。添加具有相同 ID 的元素会导致冲突和意外行为。

<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. 没有唯一 ID 且

   2.您的按键事件不适合动态创建的元素。

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