jquery appended div onclick not work first time

Question

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

Answer 1

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>