Question

I have a following structure

<div>
<ul id='t1'>
  <li id='l1' contenteditable='true' class='editable'> Lorem ipsum </li>
  <li id='l2' contenteditable='true' class='editable'> Lorem ipsum </li>
  <li id='l3' contenteditable='true' class='editable'> Lorem ipsum </li>
</ul>
</div>

What I want here is when the user edits say li l3 and when he hits enter I want to add new li with contenteditable = true and setfocus on the new li so that user can start typing there.
I was able to add a new entry on enter by but couldn’t set focus on it.

Update

 if(e.keyCode == 13){//enter Key or tab key 9
    e.preventDefault();
    var taskId = this.id;
    jQuery.ajax({
        url : 'update_current',
        type : 'put',
        success : function(resp){ //resp is the new li tag
          var li =  this_is_current_elemtn;
          jQuery(li).append(resp);

          //$('#t1 .editable').each(function(){
            // $(this).attr('editable', 'false');
          //});
          console.log(jQuery(li).next());

           jQuery(li).next().focus();
         // $('#t1 .editable').each(function(){
         //    $(this).attr('contentEditable', 'true');
         // });
        }
    });

any help is appreciated

Answer 1

Try this: http://jsfiddle.net/t7GJc/

$('#t1').on('keydown', 'li', function(e){
    var c = e.which || e.keyCode;
    if(c === 13){
        e.preventDefault();                    
        if($(this).is($('#t1 li:last'))){
            $(this).after($('<li id="l'+($('#t1 li').length + 1)+'" contenteditable="true"/>'));
        }
        $(this).next().focus();
    }
});