动态文本框列表

Question

我想使用jquery制作文本框列表。我想要的是让文本在点击时变成文本框。然后我想让它回到文字后面。我的问题是获取动态创建的文本框来关注，更改文本框文本，删除并更改文本。这是我的代码：

$('.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是文本，而#ltb是文本框。我需要#ltb来改变价值，重点和被删除。一旦#ltb被删除，我需要.l才能更改。有人能告诉我如何做到这一点？

Answer 1

在这里的工作修订 - 通知（如pepkin说的）live，我也移动了输入文本区域的删除。

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

Answer 2

而不是.click(function() {})使用.live('click', function() {})或.delegate('click', function() {})。类似于.blur()。

这是必要的，因为元素是动态添加到文档中的，并且没有为它们添加事件侦听器。

Answer 3

$(document).ready(function() { 
    $('.l').live('click', function() { 
     $(this).replaceWith('<input type="text" id="ltb" class="' + $(this).attr('id') + '" value="' + $(this).text() + '" />');   
     $('#ltb').focus().select(); 
    }); 

    $('#ltb').live('blur', function() { 
     $(this).replaceWith('<div id="' + $(this).attr('class') + '" class="l">' + $(this).val() + '</div>'); 
    }); 
}); 

http://jsfiddle.net/psw4d/