Low lvl skill или как переименовать поле.
 

Есть список.

<ul>
    <li id="1" ondblclick="reName(this.id);">Parent1</li>
    <li id="2" ondblclick="reName(this.id);">Parent2</li>
    <li id="3" ondblclick="reName(this.id);">Parent3</li>
    <li id="4" ondblclick="reName(this.id);">Parent4</li>
    <li id="5" ondblclick="reName(this.id);">Parent5</li>
</ul>

Так же, есть вот такая функция.

function reName (elementId) {
    var id = '#' + elementId;
    var val = $(id).text();
    $(id).empty();
    $(id).append("<input type='text' value='"+val+"' name='"+elementId+"'>");
}

Цель
При двойном клике на элемент списка (<li></li>), появляется текстовое поле, с помощью которого можно изменить текст внутри этого элемента (внутри <li></li>). Текстовое поле должно исчезнуть, после клика за пределами этого поля (за пределами <input />). Ну и соответственно, текст внутри <li></li>, должен измениться на тот, который был введен в текстовом поле.

Проблема
Не могу реализовать функцию для скрытия <input /> и сохранения его значения в <li></li>.

Что я вообще делаю и для чего мне эти функции
В конечном итоге, содержимое внутри <li></li> будет извлекаться из бд. А с помощью ajax, будет происходить переименование/удаление/добавление, и перетаскивание (изменение порядка) полей <li></li>.
Короче будет дерево.

Типичные ответы
Да, я гуглил. Ничего не нашел полезного, может быть не правильно строил поисковые запросы, как знать?!
Нет, библиотеки по типу jstree использовать нельзя. Просто из-за того, что хочется самому понять как реализовать дерево.

Заранее спасибо всем, кто мне ответит.

Если после скрытия сохранение, значит достаточно обработки события onblur элемента, и Гугл по этому вопросу завалит.

С такой структурой списка как у вас, это скорее сортировка пользовательская, но не порождение дерева.

newbie guy,
готовое решение
вам только изменить селектор в строке 25
http://javascript.ru/forum/misc/4559...tml#post302151

Я знаю, что это список.
Но за подсказку спасибо.

рони,
Спасибо, помогло. Вроде бы.

В итоге нарисовал вот такое. Лично меня устраивает.

function reName (elementId) {
    var id = '#' + elementId;
    var val = $(id).text();
    $(id).html("<input type='text' value='"+val+"' id='"+elementId+"sp' >");
    $(id+'sp').focus().val(val);
    $(id+'sp').blur(function() {
        $(id).html($(id+'sp').val());
    });
    $(id+'sp').keyup(function(event) {
        if(event.keyCode==13) { $(id).html($(id+'sp').val()); }
    });
}

<ul>
    <li id="1" ondblclick="reName(this.id);">Parent1</li>
    <li id="2" ondblclick="reName(this.id);">Parent2</li>
    <li id="3" ondblclick="reName(this.id);">Parent3</li>
    <li id="4" ondblclick="reName(this.id);">Parent4</li>
    <li id="5" ondblclick="reName(this.id);">Parent5</li>
</ul>

newbie guy,

<form class="ul">
    <input class="li" name="1" value="Parent1">
    <input class="li" name="2" value="Parent2">
    <input class="li" name="3" value="Parent3">
    <input class="li" name="4" value="Parent4">
    <input class="li" name="5" value="Parent5">
</form>

Rise,
Тоже вариант.:)

В общем, чего парить вам мозг своей бестолковостью.

Когда реализую то что я хочу, предоставлю в этой теме, а может и в другой.

Уверен мой "говно код" все оценят :D