Me gustaría hacer que se pueda ingresar un li después de ejecutar la página. Quiero que la función li se acerque al formato de Word Office. Quiero decir, cuando escribimos en la primera lista y luego la INTRODUCIMOS, se centraría en la segunda lista y etc. y este es mi código que he hecho antes:
<div class="writeform"> <label class="subtitle">ingredients</label> <ol> <li><input class="formxyz globalwrite" id="ingred" name="ingred" placeholder="ingredients"></input> </li> </ol> </div>y este es el script en ajax
$('input#ingred').on('keydown',function(e){ if(e.which == 13) { $('ol').append('<li><input class="formxyz globalwrite" id="ingred" name="ingred" placeholder="ingredients"></input></li>'); $('input#ingred').focus(); } });cuando ejecuto este código y escribo en la primera línea, luego presiono ENTER, aparece el segundo li. Pero cuando escribo en 2nd li y presiono enter, no se agrega nada. ¿Cómo puedo hacer que esta función de agregar funcione continuamente cuando presiono la tecla ENTER?
No puede tener usos duplicados de valores de ID: no es HTML válido y su selector para el elemento de entrada no funcionaría correctamente. Lo mismo ocurriría con el uso de una clase, aunque es válido tener múltiples usos de una clase, la selección seleccionaría todos los elementos coincidentes. Deberá generar una ID única o usar un selector diferente para seleccionar el último elemento de entrada, como el selector jquery .last() .
Si hay dos selectores de ID con el mismo nombre, jQuery solo selecciona el primero.
Debe vincular el evento keydown usando el método de delegación, así:
Cambia esto:
$('input#ingred').on('keydown',function(e) {
Dentro de esto:
$(document.body).on('keydown','input#ingred',function(e) {
Porque la primera sintaxis no se vinculará a los elementos que se crean más tarde (dinámicamente).
ACTUALIZAR
Para una forma más correcta, debe hacer que se vincule a class o atributo de name en lugar de id , porque id id originalmente para nombrar elementos y debe ser único.
Creo que esto es lo que necesitas de la manera correcta: :D
$(document.body).on('keydown','input.formxyz',function(e) {
o:
$(document.body).on('keydown','input[name="ingred"]',function(e) {
¡Buena suerte!