jQuery: adding a new text field dynamically

Question

My goal is to add a new text field every time the user hits the TAB key. Unfortunately it only adds one field and then stops.

$('input[type="text"]').keydown(function (e) {
    if(e.keyCode === 9) {
        var div = $('#fields');
        div.append('<br><input type="text">');
    }
});

The HTML...

<div id="fields">
    <input type="text" id="textbox1" autofocus>
</div>

Answer 1

You are only adding the keydown() function to the first input.

Add it to each successive instance of inputs:

$(document).ready(function() {
    $('input[type="text"]').keydown(addInput);
});

function addInput(e) {
    if(e.keyCode === 9) {
        var div = $('#fields');
        var input = $('<br><input type="text">');
        input.keydown(addInput);
        div.append(input);
    }
}