Есть список.
<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 использовать нельзя. Просто из-за того, что хочется самому понять как реализовать дерево.
Заранее спасибо всем, кто мне ответит.