为什么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();
  } 
 });

演示