jquery - 为什么这个 jquery 代码没有像我预期的那样工作？

Question

这是HTML：

<input type="text" id="name" /><input type="button" id="insert" value="Insert" />
<div id="display_list"></div>

这是jQuery代码：

$(document).ready(function() {
    function display() {
        $('#display_list').text('');
        $.each(names, function(index, value) {
            $('#display_list').append(index + 1 + '. ' + value + '<br/>');
        });
    }
    var names = ['cow', 'alex', 'ram'];
    display();
    $('#insert').click(function() {
        var name = $('#name').val();
        names.push(name);
        display();
    });
});

问题是它显示

1. 奶牛
2. 亚历克斯
3. 内存

起初，但是当我在输入中键入内容并单击插入框时，它没有显示任何值，而是增加了索引号，如下所示：

1. 奶牛
2. 亚历克斯
3. 内存
4. 5.

Answer 1

您可以使用$.trim()检查输入值是否为空：

 $('#insert').click(function(){
   var name= $.trim($('#name').val())
   if (name != "") {  
      names.push(name);
      display();
  } 
 });

演示