Javascript jquerykeydown创建列表_Javascript_Jquery

Javascript jquerykeydown创建列表

javascript jquery

Javascript jquerykeydown创建列表,javascript,jquery,Javascript,Jquery,我正在尝试创建一个列表，用户可以在其中的表单字段中键入文本，并且每当用户按enter键时，下一个表单字段就会显示在该列表下方。这是我的代码： HTML: JS: 这给了我2个新的未格式化框，而不是它下面的一个格式化框。在新的未格式化框上按“回车”键会生成新的未格式化框，并会弄乱页面。代码出了什么问题？与其追加，不如尝试将要显示的框显示在HTML中，但默认情况下隐藏，然后使用jQuery显示它，例如： $(document).ready(function(){ $('.someOtherF

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

HTML:

JS:

这给了我2个新的未格式化框，而不是它下面的一个格式化框。在新的未格式化框上按“回车”键会生成新的未格式化框，并会弄乱页面。代码出了什么问题？

与其追加，不如尝试将要显示的框显示在HTML中，但默认情况下隐藏，然后使用jQuery显示它，例如：

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

只需确保在html文件中包含要隐藏和显示的任何其他表单，就可以了。

与其添加，不如尝试将要显示的框显示在html中，但默认情况下隐藏，然后使用jQuery显示它，类似于：

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

只需确保在html文件中包含要隐藏和显示的任何其他表单，就可以了。

您有一些问题

您正在使用
```
parents
```
，它将选择元素的all父元素。我相信你真的只想要直接的父母，所以只使用
```
parent
```
。（这就是为什么要创建两个元素而不是一个，因为除了表单、
```
body
```
和
```
html
```
之外，元素还有两个父元素）
通过执行
```
append（$（'input'））
```
您是在追加现有输入，而不是创建新输入。您应该执行
```
append（$（“”））
```
来创建新的输入并将其追加
进行了这些更改后，您现在需要对事件委派使用
```
on
```
，以便
```
keydown
```
处理程序影响动态创建的输入。（有关活动委派的详细信息，请参阅。）

通过这些更改，您将得到以下结果：

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

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

$（'form'）。关于（'keydown'，'input'，函数（e）{
如果（e.keyCode==13）{
var store=$（this.val（）；
$（this.parent（）.append（$（“”））；
};
});

您有一些问题

您正在使用
```
parents
```
，它将选择元素的all父元素。我相信你真的只想要直接的父母，所以只使用
```
parent
```
。（这就是为什么要创建两个元素而不是一个，因为除了表单、
```
body
```
和
```
html
```
之外，元素还有两个父元素）
通过执行
```
append（$（'input'））
```
您是在追加现有输入，而不是创建新输入。您应该执行
```
append（$（“”））
```
来创建新的输入并将其追加
进行了这些更改后，您现在需要对事件委派使用
```
on
```
，以便
```
keydown
```
处理程序影响动态创建的输入。（有关活动委派的详细信息，请参阅。）

通过这些更改，您将得到以下结果：

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

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

$（'form'）。关于（'keydown'，'input'，函数（e）{
如果（e.keyCode==13）{
var store=$（this.val（）；
$（this.parent（）.append（$（“”））；
};
});

您可以使用jsbin或codepen之类的工具来显示结果。这将使您的代码更容易理解和更正。您可以使用jsbin或codepen之类的工具来显示结果。这将使您的代码更容易理解和更正。此方法的问题是，在显示的新表单中，当我按enter键时，它不会创建新表单字段。啊，我完全误解了您希望执行的操作@詹姆斯·蒙塔涅的答案似乎正是你想要的。这种方法的问题是，在显示的新表单中，当我按enter键时，它不会创建新表单字段。啊，我完全误解了你想要做的事情@詹姆斯·蒙塔涅的答案似乎就是你想要的。

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

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