Question

I am trying to make a text box list using jquery. What I want is to have text that changes into a textbox when clicked. Then I want it to return to text afterwords. My problem is getting the dynamically created textboxes to focus, change the textbox text, be removed and change the text. This is my code:

$('.l').click(function() {
    $('<input type="text" id="ltb"      class="'+$(this).attr("class")+'">').insertAfter($(this)).val($(this).val());
    $('#ltb').focus();
    $(this).remove();
})
$('#ltb').blur(function() {
    $('<div id="'+$(this).attr("class")+'" class="l">'+$(this).val()+'</div>').insertAfter($(this));
    $(this).remove();
});

.l is the text while #ltb is the textbox. I need the #ltb to change value, focus, and be removed. I need .l to change once #ltb is removed. Can someone tell me how to do this?

Answer 1

A working revision here – notice (as pepkin said) the live, also I moved the removal of the input text area.

http://jsfiddle.net/TrowthePlow/Yp6Yj/1/