javascript - 意外的 jquery .last() 行为

Question

我正在尝试为我的网站构建一个自定义关键字字段，

问题是我有一个输入 div 持有人，我通过单击按钮附加输入，但我检查

$('div inputs').last().val().length < 3

如果它小于 3，我会摇动输入，否则：

$('div inputs').last().after('<input type="text" />')

---

问题是：

$('div inputs').last().val()

总是返回第一个输入值，我做错了什么？

演示

Answer 1

您已将输入缓存在顶部，因此您始终使用同一组输入控件 - 一个。

在回调中定义您的输入变量，它将起作用：

$('body').on('click','#addkey',function(e){
    var inputs = $('#keysInput input');

    if(inputs.last().val().length < 3){
        $('#keysInput input').last().effect("shake", { times:1, distance: -5 }, 300);
    }else{
        console.log(inputs.last().val());
        $('#keysInput input').last().after('<input type="text" placeholder="type another keyword" />');            
    }
})

Answer 2

像这样的东西：演示 http://jsfiddle.net/pVJXM/5/

行为：每次输入3字符和更多内容并+单击时，最后都会附加一个输入输出。

我使用var inputs = $('#keysInput input:last');而不是使用.last()多次:) 这将为您解决问题。

希望能帮助到你，

代码

var cont = $('#keysInput');

var addBtn = $('#addKey');

$('body').on('keydown','#keysInput',function(e){

});

$('body').on('click','#addkey',function(e){

    var inputs = $('#keysInput input:last');

    if(inputs.val().length < 3){
        inputs.effect("shake", { times:1, distance: -5 }, 300);
    }else{
        console.log(inputs.last().val());
        inputs.after('<input type="text" placeholder="type another keyword" />');            
    }
})




​

Answer 3

在脚本的开头，您选择inputs：

var inputs = $('#keysInput input');

之后，您在脚本首次运行时使用该特定值集，其中不包含新创建的字段。换句话说：您inputs只包含一个字段（初始字段）。

解决方案是简单地将值（所选输入列表）重新分配给该变量。