動態文本框列表

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/