Question

last.fm has this nifty feature when you’re adding an event. you have the Artists field, and when you start typing in it, another text field appears beneath it. when you start typing in that next field, another new field appears beneath and so on. I’ve been trying to figure out how to mimic this functionality using jquery but I can make it work on the first, stationary, field only. any ideas?

edit:

actually, nope, it’s not working even for the stationary one, since it adds the field on EVERY key press

edit2:

alrighty, so some fine folks have already solved my adding issue, now, how would one go about adding the field only after the first time a key is pressed.

Answer 1

You are probably only binding your handler to the first static input, and not the dynamically created ones. Use .live() to do your event binding. That will bind the event to future elements that match the selector.

To make sure you only add one new one, make sure you only add it when typing into the last textbox. Check $(this).closest(".container").next(".container").length to make sure there isn’t already a new textbox.

$("input.myClass").live("keyup", function (e) {
    var $container = $(this).closest(".container");
    if (this.value && !$container.next(".container").length) {
        var $newContainer $("<div>").insertAfter($container).addClass("container");
        ...
    }
});