2

私は次の構造を持っています

<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>

ここで必要なのは、ユーザーが編集して li l3 と入力し、Enter キーを押したときに contenteditable = true で新しい li を追加し、新しい li にフォーカスを設定して、ユーザーがそこで入力を開始できるようにすることです。入力時に新しいエントリを追加できましたが、フォーカスを設定できませんでした。

アップデート

 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');
         // });
        }
    });

どんな助けでも大歓迎です

4

3 に答える 3

2

少し遅れていることはわかっていますが、とにかく、 contenteditable='true' を親の ol または ul に追加すると、うまくいきます! :)

于 2013-11-28T15:02:29.363 に答える
0

これを試してください：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();
    }
});
于 2012-11-06T15:53:00.980 に答える
0

jsfiddle

    $("ul").on("keyup", "li",function(e){
    if(e.keyCode == 13){
     var elem = $( "<li contenteditable='true'> Lorem ipsum </li>").appendTo ($(this).parent());
         elem.focus();
}
        return false;

    });​
于 2012-11-06T15:59:12.410 に答える