Question

My intention is for a new <input> fields to be created every time there is only one blank one left – so when the top one loses focus. This happens, but only once (so only three <input> fields can ever be made.

My working example is at http://sas98.user.srcf.net/guestlist/ under number 4.

The code is:

<div id="names">
<p><input class="input" type="text" name="name1" /></p>
<p><input class="input" type="text" name="name2" /></p>
</div>

<script type="text/javascript">
$(document).ready(function() {
var name = $("<p><input class='input' type='text' /></p>");
    $('.input').blur(function() {
        if($(this).val().length>0) {
            $('#names').append(name.clone());
        }
    });
});
</script>

EDIT:

            $('#names').append(name);

Changed to

        $('#names').append(name.clone());

Makes it work a couple more times before getting stuck. It seems temperamental – I can’t see a pattern to it.

Answer 1

The problem is the event handler is not updated.
for Jquery < 1.7 use $.live() to bind blur,
on newer versions use $.on()