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

您需要将.val()更改为.text()以进行 div 单击。

来自文档

.val()方法主要用于获取表单元素的值，例如 input、select 和 textarea。 当在空集合上调用时，它返回未定义。

$('.js-input').val($(this).text())

2 - 您在 append 中的 div 字符串有不匹配的引号，正确的顺序应该如下所示。

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

阅读它也很有帮助： 我什么时候应该在 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>