this is my code
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'))
})
problem is .js-item
onclick not working at firsttime - it's work when i doubleclick i can't find why
You need to change .val()
to .text()
for the div click.
From Docs
The
.val()
method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.
$('.js-input').val($(this).text())
2 - Your div string in append has mismatch quotes, the correct order should be as below.
`<div class='js-item' data-value='` + element + `'>` + element + `</div>`
Also its helpful for you to read: When should I use double or single quotes in JavaScript?
Working code below
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.