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 点击。

来自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>

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

jquery appended div onclick not work first time

javascript

jquery

dom

onclick