Question

我正在尝试创建一个列表，用户可以在表单字段中键入文本，每次用户按Enter键时，下一个表单字段都会显示在其下方。这是我的代码：

HTML：

<body>

    <form class="list">
        <input type="text" name="list">
    </form>

</body>

CSS：

.list {
    margin-left: auto;
    margin-right: auto;
    margin-top: 230px;
    width: 305px;
    border-radius: 2px;

}

form input {
    height: 40px;
    width: 300px;
    background-color: blue;
    color: white;
    font-size: 15px;
    font-family: helvetica;
}

JS：

$(document).ready(function(){
    $('form input').keydown(function(e){
        if(e.keyCode == 13) {
            var store = $(this).val();
            $(this).parents().append($('input'));
        };
    });
})

这给了我2个新的未格式化的盒子，而不是它下面的一个格式化的盒子。在新的未格式化的框上按“输入”会给我更新的未格式化的框并使页面混乱。代码有什么问题？

Answer 1

你有一些问题。

您正在使用parents，它将选择该元素的所有父项。我相信你真的只想要直接的父母，所以只使用parent。（这就是创建2个元素而不是1个元素的原因，因为除了表单body和html之外，元素还有2个父元素。
通过执行append($('input'))，您将附加现有输入而不创建新输入。您应该append($('<input/>'))来创建新输入并附加该输入。
进行这些更改后，您现在需要使用on进行事件委派，以使keydown处理程序影响您动态创建的输入。（有关the on documentation中事件委托的更多信息。）

有了这些改变，你最终会得到这个：

$('form').on('keydown', 'input', function(e){

    if(e.keyCode == 13) {            
        var store = $(this).val();
        $(this).parent().append($('<input/>'));
    };
});

http://jsfiddle.net/XjpG7/

Answer 2

为什么不尝试使用您想要在HTML中显示的框，而不是追加，而不是默认隐藏，然后使用jQuery显示它，例如：

$(document).ready(function(){
    $('.someOtherForm').hide();
    $('form input').keydown(function(e){
        if(e.keyCode == 13) {
            var store = $(this).val();
            $('.someOtherForm').show();
        };
    });
})

请确保在html文件中包含您想要的任何其他形式以隐藏和显示，您应该很高兴。

jQuery keydown创建列表

2 个答案: