jQuery's blur() and selector problem

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)... Please I need help urgently. Thanks a lot. 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.

Answer 2

The selector is only evaluated when the event's assigned. Try something like

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

That way, every :text gets the event (we use the live function to make sure that it's automatically assigned to new elements when they're created), but we use the is function to make sure that the one selected was really the last one.

(I also got rid of a redundant $ call in the appendTo. jQuery functions like appendTo can take a selector string as a parameter.)