Question

我是JS的新手，我必须使用Jquery改进我的页面功能。我目前的Html是：

<div class="input_fields_wrap">                  
    <div><ul class="inputList"></ul></div>
</div>

目标是每次用户在最后一个输入字段中按键时，在最后一个子元素后追加新的输入字段。但这应该只发生一次，之后用户可以在不添加新输入的情况下计算输入。并且，如果用户开始键入新的附加输入，则应添加另一个，依此类推。我试过这样的东西，但只增加了一次。

$(".inputList").last().one("keypress",(function () {
  $(wrapper).append('<li><input type="text" name="key" placeholder="Attribute" /><input type="text" name="value" placeholder="Value"/><a href="#" class="remove_field">Remove</a></li>');
}

当我删除one()时，在每个按键中追加数字。我应该怎么做呢？

谢谢！

Answer 1

您必须在追加元素后定义事件处理程序。

var appendInput=function(){

 $('<li><input type="text" name="key" placeholder="Attribute" /><input type="text" name="value" ' +
                    'placeholder="Value"/><a href="#" class="remove_field">Remove</a></li>').one("keypress",appendInput).appendTo(".input_fields_wrap");
}

$(".inputList").last().find("input").one("keypress",appendInput);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input_fields_wrap">                  
      <div>
      <ul class="inputList"><input type="text"/></ul></div>
</div>

Answer 2

或者您只需从点击的class元素中删除input，请在下面的代码段中找到更多信息

＆＃13;

$(document).on("keypress",".addanother",function(){
   $(".inputList").append('<li><input type="text" name="key" placeholder="Attribute" /><input type="text" name="value" placeholder="Value" class="addanother"/><a href="#" class="remove_field">Remove</a></li>');
   $(this).removeClass("addanother");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">                  
  <div>
    <ul class="inputList">
    <li>
    <input type="text" name="key" placeholder="Attribute" />
    <input type="text" name="value" placeholder="Value" class="addanother" />
    </ul>
  </div>
</div>

＆＃13;

此外，对于动态创建元素的绑定事件，请查找this answer

Jquery在last-child keypress上输入apped

2 个答案: