Double click to edit and add new value to li

Question

$(document).on('dblclick', '#li', function () {
 oriVal = $(this).text();
 $(this).text("");
 input = $("<input type='text'>");
 input.appendTo('#li').focus();
});
$(document).on('focusout', 'input', function () {
 if (input.val() != "") {
 newInput = input.val();
 $(this).hide();
 $('#li').text(newInput);
 } else {
 $('#li').text(oriVal);
 }
});

So far, I still can't do OOP in jQuery. Can you improve the above code?

• plalx: Do not listen to such a ridiculous statement and instead have a look at these articles, they should greatly help you. alistapart.com/article/writing-testable-javascript addyosmani.com/resources/essentialjsdesignpatterns/book
• Daniel: Does this code work? You don't explain what you're trying to do, and the code and question title don't seem to match.

Answer 1

I wasn't sure how to answer this, so I went with what your code does...

1. Scope your variables.
2. Change your code to target all li instead of one element with the id li.
3. Use this when events are triggered to make sure you have the correct element.
4. Remove the added elements instead of hiding them.
5. Remember to call on using the smallest possible parent container. Possibly a <ul> or <ol>?
6. Use short circuiting where appropriate.
7. Use jQuery.parent() to get the appended elements parent.

Putting all those change together:

var oriVal;
$("#parentUL").on('dblclick', 'li', function () {
 oriVal = $(this).text();
 $(this).text("");
 $("<input type='text'>").appendTo(this).focus();
});
$("#parentUL").on('focusout', 'li > input', function () {
 var $this = $(this);
 $this.parent().text($this.val() || oriVal); // Use current or original val.
 $this.remove(); // Don't just hide, remove the element.
});

Here's the JSFiddle.