jquery ¿se centró en el contenido dinámico?

Question

En jquery he agregado un elemento <li> a una lista desordenada.

¿Cómo me concentro en el recién creado <li>?

Si hago lo siguiente:

$("ul").append('<li><input type="text" value="Hi!"></li>'); 
$("li:last").focus(); //doesn't work because new <li> isn't in dom yet 

el foco no funciona, como se señaló anteriormente.

Sé 1.4.2 jQuery tiene un manejador de eventos live() que le permite cargar los controladores de eventos a elementos añadidos de forma dinámica, pero no estoy seguro de lo que estoy haciendo mal:

$(document).ready(function() { 

    $('li').live('load', function() { 
     alert("hi!"); 
     $("li:last").focus(); 
    }); 
}); 

Answer 1

Sólo se puede establecer el foco a los elementos que pueden mantener el foco. Por defecto, un elemento de la lista no puede. Es por esto que el primer ejemplo falla, no porque no está en el DOM (que es en el DOM, que es lo que hace append)

En general, usted debe utilizar elementos diseñados para mantener el foco (es decir establecer el foco en la entrada no en el elemento de la lista). También puede (pero esto es menos compatible con versiones anteriores y menos lógico) usar HTML5 tabindex (probablemente estableciéndolo en 0).

onload no funcionará porque los elementos de la lista no cargan contenido externo.

Answer 2

Puedes probar esto, $(YourElement).trigger("focus").

Answer 3

Esta es una publicación anterior que conozco, pero una forma simple de resolver este problema es crear una entrada de texto en su HTML y establecer su CSS para "mostrar: ninguno;". En el evento de clic de LI, establezca el foco en esta entrada y escuche sus eventos de pulsación de tecla.

Lo he hecho y funciona como un encanto.