Question

I’m trying to create a new div each time a text field contained in the last div loses focus, but a new div is added only when the text field in the first div loses focus (instead of the last).

Here’s my code:

    $(function() {
          $(':text:last').blur(function() {
            $('<div class="line"><span>data: </span><input type="text"/></div>')
            .appendTo($('#lineStack'));
        });
    }); 

HTML:

<div id="lineStack">
    <div class="line">
        <span>data: </span><input type="text" />
    </div>
</div>

Answered: Thanks Nick! Your answer worked. I’ve been trying to mark your post as answer but it’s not working. Don’t know why 🙂

Answer 1

You can do this instead (requires jQuery 1.4+, otherwise blur bubble isn’t handled):

$(function() { 
  $(':text:last').live('blur', function() { 
    $('#lineStack').append('<div class="line"><span>data: </span><input type="text"/></div>'); 
  }); 
});

Your current selector gets an element and attaches the event to that element (the others don’t exist yet, so it’s :last). What you want to do is have the blur fire no matter when the element was added if it’s last, .live() will handle that. See here for a working example.