jQuery fire event once when an input is typed in

Question

When a user starts typing in an empty input in a list I would like a new input to be appended to the list the for the next value to be added. Then, if they type in the new input, another new one is added and so on.

The code I have is..

$('.addNew').on('input', function(){
    var $parentUl = $(this).closest('ul');
    if($(this).val().length === 0){
        $(this).removeClass('addNew');
        $parentUl.append('<li class="catsLi"><input type="text" class="catItem addNew" name="reason[]" value=""/></li>');
    }
});

This works but it adds a new input every time the users type another character rather than just on the first one. I have tried using one instead of on but then it will only add extra input, if the user types in the new input nothing happens.

With this in mind I thought I would check if the input is empty before appending a new input so it only does it once per input but it isn't working.

I can see from chrome inspect that when I type in the input, it isn't actually changing it's value which is why it always adds a new input so I have tried checking for $(this).text().length instead but it still thinks it's empty.

Answer 1

Using .one() would be a good option, you just have to make sure you also add a listener to the new input field that you append. Here's a proof-of-concept:

 // save a reference to the parent <ul> so we only have to look it up once $parentUL = $('#parentUL'); function addNewField() { // create a new <li> var $newLI = $('<li class="catsLi"><input type="text" class="catItem" name="reason[]" value=""/></li>'); // when the user first types in this new field, call addNewField() to add another "new" field to the list // (.one() ensures that the event will only fire once per field) $newLI.find('input').one('input', addNewField); // add the new <li> element to the end of the <ul> $parentUL.append($newLI); } // add a "new" field as soon as the page loads addNewField(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="parentUL"> <li class="catsLi"><input type="text" class="catItem" value="Existing One"/></li> <li class="catsLi"><input type="text" class="catItem" value="Existing Two"/></li> </ul> 

Answer 2

Managed to create my own solution based on the comments from above

$('.posUl').on('input', '.addNew', function(){
    var $parentUl = $(this).closest('ul');
    var $entered = $(this).val().length;
    if($entered === 1){
        $parentUl.append('<li class="catsLi"><input type="text" class="catItem addNew" name="reason[]" value=""/></li>');
    }
});

By checking the value of $entered I discovered it was never empty on change (obviously) then binding it on the ul meant it worked on the new input which was a dynamic element