How to make it so that when you create a new item in it transfer the focus?

https://jsfiddle.net/brachkoff/zfh8wmzr/3/

HTML:

<ul id="list"> <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Текст задания</span></li> <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Еще текста</span></li> <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Какой-то текст</span></li> </ul> <div id="interface"> <button id="add">Add Task</button> </div>

Js:

 $('#add').click(function() { $('#list').append('<li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text"></span></li>') })

    3 answers 3

     $('#list') .append('<li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text"></span></li>') .find('li:last-child [contenteditable]') .focus();
    • Can you clarify in more detail what you did with .find? - user272575 5:58 pm
    • @brachkoff, found the item you want to set focus on. Actually, the name of the method - find - speaks for itself - "find")) - Deonis
    • @brachkoff, the find() method searches for children. In this case, if I'm not mistaken, the search is performed from the added li element (since append returns a jQuery object, judging by the documentation). And the method parameter is a selector that selects elements with a contenteditable attribute, children of the last descendant li . If my reasoning is correct, then this code is not only ineffective, but also contains an error ... although it may work. - yar85
    • @ yar85, in short, your reasoning is not correct. However, the effectiveness of the library as a whole is really difficult to talk about. - Deonis
    • @Deonis, there was no talk about the effectiveness of the library as a whole (because this is not the case). - yar85

    There is a focus() method that is designed to set the focus.

    An example on jsfiddle .

     $('#add').click(function() { var $el = $('<li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text"></span></li>'); // создаем элемент $('#list').append($el); // Добавляем его в список $el.find('.task__text').focus(); // Находим редактируемый элемент и устанавливаем фокус }) 
     #list { list-style: none; padding-left: 40px; padding-right: 40px; } .task__text { margin-left: 0.5rem; outline: none; } .task__text br { display: none; } #interface { padding-left: 40px; padding-right: 40px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="list"> <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Текст задания</span></li> <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Еще текста</span></li> <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Какой-то текст</span></li> </ul> <div id="interface"> <button id="add">Add Task</button> </div>

      In addition to the focus method, you can change the construction of elements in order not to look for an element that we ourselves create.

      To do this, you can use the appendTo method (a little about the difference between append and appendTo )

      The peculiarity of the appendTo method is that it returns the element that was added, hence the focus method can also be applied to its result.

      Example of implementation:

       $('#add').click(function() { $('<span contenteditable="true" class="task__text"></span>').appendTo( $('<li class="task"><input type="checkbox" class="task__checkbox"></li>').appendTo('#list') ).focus(); }) 
       #list { list-style: none; padding-left: 40px; padding-right: 40px; } .task__text { margin-left: 0.5rem; outline: none; } .task__text br { display: none; } #interface { padding-left: 40px; padding-right: 40px; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="list"> <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Текст задания</span></li> <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Еще текста</span></li> <li class="task"><input type="checkbox" class="task__checkbox"><span contenteditable="true" class="task__text">Какой-то текст</span></li> </ul> <div id="interface"> <button id="add">Add Task</button> </div>