Dynamic text box list bug jquery

I 开发者_开发问答have a list of text. Whenever this text is clicked it becomes a textbox. However, if I double click on the textbox it becomes unusable. This is my javascript:

$('.l').live('click', function() {
$('<input type="text" id="ltb" name="'+$(this).attr("id")+'" class="'+$(this).attr("class")+'">').insertAfter($(this)).val($(this).text());
$('#ltb').focus().blur(function() {
    $('<div id="'+$(this).attr("name")+'" class="l">'+$(this).val()+'</div>').insertAfter($(this));
    $('#'+$(this).attr("class")).text($(this).val());
    $(this).remove();
});
$('#ltb').keypress(function(event)
{
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        $('<div id="'+$(this).attr("name")+'" class="l">'+$(this).val()+'</div>').insertAfter($(this));
        $('#'+$(this).attr("class")).text($(this).val());
        $(this).remove();
    }

});
$(this).remove();
//$(this).hide();
});

The div which contains the text looks like this:

<div id="xxxxxxx" class="l">Text here</div>

Fixed it.

$('.l').live('click', function() {
    if ($('#ltb').length > 0) return;
    // rest of code here

It will also work if you replace live with one. I think the problem comes with creating two divs with the same id so this checks to see if it exists before creating one.

From here:

a document with more than one element using the same ID is invalid.

And more about one (used to bind an event once, found out about this a few days ago reading a jQuery pocket reference):

http://api.jquery.com/one/

Change z-index parameter of div.