javascript - jquery 附加 div onclick 第一次不起作用

Question

这是我的代码

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'))
})

问题是.js-item onclick第一次不起作用 - 当我双击时它起作用 我找不到原因

Answer 1

您需要将 div 点击的 .val() 更改为 .text()。

来自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 - 附加的 div 字符串的引号不匹配，正确的顺序应如下。

`<div class='js-item' data-value='` + element + `'>` + element + `</div>`

阅读以下内容对您也有帮助:When should I use double or single quotes in JavaScript?

---

下面的工作代码

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>