jQuery在最后一个孩子的按键上设置了输入

Question

I am novice to JS and i have to improve my page functionality using Jquery. My current Html is:

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

Goal is to append new input field after last child element every time user press a key in the last input field. But that should happen only once, and after that user can countinue typing without appending new inputs. And, if user begin typing in that new appended input, another one should be added and so on. I tryed something like this, but that adds field only once.

$(".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>');
}

When i remove one() , append countinues in every keypress. How should i manage this?

Thanks!

Answer 1

You must define event handler after append elements.

 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

Or you can simply remove that class from clicked input element please find below snippet for more info

 $(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"); }); 

 <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> 

Additionally for binding event on dynamically created element please find this answer