jquery appended div onclick not work first time-CodePudding

this is my code

html :

<input type="text" >  
<div ></div>

jquery :

var myarray = ['apple' , 'orange'];
myarray.forEach(element => {
$('.js-autofill').append(
`<div  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

CodePudding user response：

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" >
<div ></div>