este es mi codigo
html:
<input type="text" class="js-input"> <div class="js-autofill"></div>jquery:
var myarray = ['apple' , 'orange']; myarray.forEach(element => { $('.js-autofill').append( `<div class="js-item" data-value="`+element+`">` +element+ `</div>` ) }) $(document).on('click','.js-item',function(){ $('.js-input').val($(this).attr('data-value')) }) el problema es que .js-item onclick no funciona la primera vez; funciona cuando hago doble clic y no puedo encontrar por qué
Debe cambiar .val() a .text() para el clic div.
De Documentos
El método
.val()se usa principalmente para obtener los valores de los elementos del formulario, como input, select y textarea. Cuando se llama a una colección vacía, devuelve undefined.
$('.js-input').val($(this).text())2 - Su cadena div en el anexo tiene comillas que no coinciden, el orden correcto debe ser el siguiente.
`<div class='js-item' data-value='` + element + `'>` + element + `</div>`También es útil que lea: ¿Cuándo debo usar comillas simples o dobles en JavaScript?
Código de trabajo a continuación
var myarray = ['apple', 'orange']; myarray.forEach(element => { $('.js-autofill').append( `<div class='js-item' data-value='` + element + `'>` + element + `</div>` ) }) $(document).on('click', '.js-item', function() { $('.js-input').val($(this).text()) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="js-input"> <div class="js-autofill"></div>