Question

Voglio aggiungere un campo di input in modo dinamico alla mia pagina utilizzando il seguente jQuery:

var inputNode = "<input id='inputNode' class='tiContent' type='text' 
    placeholder='text input...'/>"; 
$("div").append(inputNode); 

e dopo averlo fatto, voglio che il campo di immissione di avere messa a fuoco con lampeggiante cursore di testo, in modo da Voglio inserirlo subito dopo la creazione.

Qualcuno potrebbe dirmi come posso farlo?

Ho provato a chiamare

$(inputNode).focus()

e hanno anche provato

$(inputNode).trigger('click')

ma nessuno di loro ha lavorato. Posso digitare nel campo dopo aver fatto clic su di esso, ma come ho detto, voglio digitare senza alcuna interazione immediatamente.

Answer 1

Quando si è tentato $(inputNode).focus(), jQuery era semplicemente costruendo una nuova scollegato (dal DOM) <input> elemento che era diverso da quello che aveva aggiunto - anche se questo disconnesso è concentrata :-)

Ci sono un paio di modi per focalizzare l'input.

Se è possibile utilizzare HTML5 quindi aggiungendo l'attributo autofocus si concentrerà l'ingresso

var inputNode = '<input autofocus id="inputNode" class="tiContent" type="text" placeholder="text input..."/>'; 
$('div').append(inputNode); 

Oppure, utilizzando jQuery, è necessario trovare il <input>dopo l'elemento è stato creato per chiamare .focus() su di esso, come il inputNode nel tuo codice è semplicemente una stringa e non un oggetto jQuery.

var inputNode = '<input id="inputNode" class="tiContent" type="text" placeholder="text input..."/>'; 
$('div').append(inputNode); 
$('div input').focus(); // or $('#inputNode').focus(); 

Answer 2

È possibile convertirlo in un oggetto jQuery prima di aggiungerlo alla dom, in questo modo si ha un riferimento ad esso. Quindi chiama semplicemente .focus sull'oggetto di riferimento.

var $inputNode = $("<input id='inputNode' class='tiContent' type='text' placeholder='text input...'/>"); 
$('body').append($inputNode);​​​ 
​$inputNode.focus();​ 

Ecco uno fiddle.

Answer 3

inputNode non è un elemento jQuery, è una stringa.

Probabilmente significa:

$('#inputNode').focus() 

in contrapposizione a:

$(inputNode).focus() 

il browser non lamentarsi in questo dato che hai una variabile con quel nome

Answer 4

<input type="button" value="click me" id="btnCreateTxt" /> 
<div></div> 

$(document).ready(function() { 
    $('#btnCreateTxt').click(function() {   
     var inputNode = $("<input id='inputNode' class='tiContent' type='text' placeholder='text input...'/>"); 
     $("div").append(inputNode); 
     inputNode.focus();  
    }); 
}); 

funziona per me: http://jsfiddle.net/GqFap/9/

Answer 5

Hai bisogno di qualcosa di simile:

$('<input />').appendTo('div').get(0).focus(); 

Il metodo di messa a fuoco è un metodo dell'elemento DOM non l'oggetto jQuery qui la necessità di una chiamata per 'ottenere'.

Come si potrebbe leggere su appendTo e get metodi docs jQuery

Spero che questo aiuti